jQuery
Pole wyboru Zaznacz wszystko z automatycznym zaznaczaniem / odznaczaniem przy innej zmianie pola wyboru
Szukaj…
Wprowadzenie
Użyłem różnych przykładów i odpowiedzi Stackoverflow, aby dojść do tego naprawdę prostego przykładu, w jaki sposób zarządzać polem wyboru „zaznacz wszystko” w połączeniu z automatycznym zaznaczaniem / odznaczaniem, jeśli którykolwiek z statusów pola wyboru grupy się zmieni. Ograniczenie: Identyfikator „wybierz wszystko” musi pasować do nazw wejściowych, aby utworzyć grupę wyboru wszystko. W tym przykładzie wejście wybierz wszystkie ID to cbGroup1. Nazwy wejściowe to także cbGroup1
Kod jest bardzo krótki, nie zawiera wielu instrukcji if (zużywa czas i zasoby).
2 zaznacz wszystkie pola wyboru z odpowiednimi polami wyboru grupy
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>
<input id="cbGroup1" type="checkbox">Select all
<input name="cbGroup1" type="checkbox" value="value1_1">Group1 value 1
<input name="cbGroup1" type="checkbox" value="value1_2">Group1 value 2
<input name="cbGroup1" type="checkbox" value="value1_3">Group1 value 3
</p>
<p>
<input id="cbGroup2" type="checkbox">Select all
<input name="cbGroup2" type="checkbox" value="value2_1">Group2 value 1
<input name="cbGroup2" type="checkbox" value="value2_2">Group2 value 2
<input name="cbGroup2" type="checkbox" value="value2_3">Group2 value 3
</p>
<script type="text/javascript" language="javascript">
$("input").change(function() {
$('input[name=\''+this.id+'\']').not(this).prop('checked', this.checked);
$('#'+this.name).prop('checked', $('input[name=\''+this.name+'\']').length === $('input[name=\''+this.name+'\']').filter(':checked').length);
});
</script>
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow