jQuery
Selectievakje Alles selecteren met automatisch in- / uitschakelen bij andere selectievakjes wijzigen
Zoeken…
Invoering
Ik heb verschillende Stackoverflow-voorbeelden en -antwoorden gebruikt om te komen tot dit echt eenvoudige voorbeeld over het beheren van het selectievakje "alles selecteren" in combinatie met een automatisch in- / uitschakelen als een van de status van het selectievakje van de groep verandert. Beperking: De id "alles selecteren" moet overeenkomen met de invoernamen om de groep Alles selecteren te maken. In het voorbeeld is de input select all ID cbGroup1. De invoernamen zijn ook cbGroup1
Code is erg kort, niet voldoende if statement (tijd en middelen vergen).
2 selecteer alle selectievakjes met bijbehorende groepsvakjes
<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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow