Ich habe eine HTML-Seite mit mehreren Kontrollkästchen.
Ich benötige ein weiteres Kontrollkästchen mit dem Namen "select all". Wenn ich dieses Kontrollkästchen auswähle, müssen alle Kontrollkästchen auf der HTML-Seite ausgewählt werden. Wie kann ich dies tun?
Dieses Beispiel funktioniert mit nativem JavaScript, bei dem der Name der Kontrollkästchenvariablen variiert, d. h. nicht nur "foo".
<!DOCTYPE html>
<html>
<body>
<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
var node_list = document.getElementsByTagName('input');
var checkboxes = [];
for (var i = 0; i < node_list.length; i++)
{
var node = node_list[i];
if (node.getAttribute('type') == 'checkbox')
{
checkboxes.push(node);
}
}
return checkboxes;
}
function toggle(source) {
checkboxes = getcheckboxes();
for (var i = 0 n = checkboxes.length; i < n; i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
</body>
</html>
JavaScript ist die beste Wahl. Der unten stehende Link enthält ein Beispiel für die Verwendung von Schaltflächen zum Auswählen aller. Sie könnten versuchen, es anzupassen, um ein Kontrollkästchen zu verwenden, verwenden Sie einfach "select all" Kontrollkästchen "onClick-Attribut.
Javascript-Funktion zum Aktivieren oder Deaktivieren aller Kontrollkästchen
Diese Seite enthält ein einfacheres Beispiel
Wenn Sie die obere Antwort für jQuery annehmen, denken Sie daran, dass das Objekt, das an die Click-Funktion übergeben wird, ein EventHandler ist, nicht das ursprüngliche Checkbox-Objekt. Daher sollte der Code wie folgt geändert werden.
HTML
<input type="checkbox" name="selectThemAll"/> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>Javascript
$(function() {
jQuery("[name=selectThemAll]").click(function(source) {
checkboxes = jQuery("[name=foo]");
for(var i in checkboxes){
checkboxes[i].checked = source.target.checked;
}
});
}) CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
