Alle checkboxes selecteren en labels met jQuery

Door G Jansma op 08-06-2020 20:00

1.701 views

Ik ben bezig met checkboxes en jQuery maar krijg niet helemaal voor elkaar wat ik wil. Met 'Select All' kan ik nu alle checkboxen in '.checkboxes' checken/unchecken. Als alle checkboxes in de div aangevinkt zijn wordt 'Select All' ook aangevinkt, anders wordt 'Select All' uitgevinkt. Dat is precies zoals ik het wil.

Het enige wat ik nog wil toevoegen is dat het precies hetzelfde gaat werken als ik op de tekst klik. Ik heb dit al geprobeerd (https://stackoverflow.com/questions/9092197/check-box-checked-when-click-in-associated-label) met labels, maar ik krijg het maar niet voor elkaar om dat goed werkend te krijgen, ook in combinatie met de werking van de 'Select All'. Ik heb mijn eigen probeersels om dat te integreren er voor het gemak maar uitgelaten.

Hopelijk kunnen jullie me hiermee verder helpen.

<!DOCTYPE html>
<html>
<head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>
$(document).ready(function(){

	$('.checkAll').click(function() {

		console.log(1);
		
		var checkboxes = $(this).closest('.checkboxes').find(':checkbox');
		checkboxes.prop('checked', $(this).is(':checked'));

	});
	
	$(document).on('change', 'input[type=checkbox]', function() {
		
		console.log(2);
		
		var boxesChecked = $(this).closest('.checkboxes').find('input:checked').length;;
		var boxesTotal = $(this).closest('.checkboxes').find('input').length;;
		var boxesMinus = boxesTotal - 1;
		
		if(boxesMinus == boxesChecked) {
		
			var checkAll = $(this).closest('.checkboxes').find('.checkAll');
			checkAll.prop('checked', $(this).is(':checked'));
		
		}
		
	});
	
});
</script>

</head>
<body>
	
	<div class='checkboxes'>
	<input type='checkbox' class='checkAll' checked> Select all<br> 
	<input type='checkbox' checked> A1
	<input type='checkbox' checked> B2
	<input type='checkbox' checked> C3
	<input type='checkbox' checked> D4
	<input type='checkbox' checked> E5
	<input type='checkbox' checked> F6
	<input type='checkbox' checked> G7
	<input type='checkbox' checked> H8
	</div>
	
	<br><br>
	
	<div class='checkboxes'>
	<input type='checkbox' class='checkAll' checked> Select all<br> 
	<input type='checkbox' checked> Q1
	<input type='checkbox' checked> Q2
	<input type='checkbox' checked> Q3
	</div>

</body>

</html>

R Rob Doemaarwat

08-06-2020 20:11 gewijzigd op 08-06-2020 20:14

Het makkelijkst is om er gewoon een <label> omheen te plaatsen:


<label><input type='checkbox' class='checkAll' checked> Select all</label><br>

Als je nu op de tekst klikt gaat de checkbox "mee".

En anders kun je altijd nog aan de slag met het "for" attribuut (verwijst naar id van de input): https://www.w3schools.com/tags/tag_label.asp

G G Jansma

08-06-2020 20:21

Kijk aan, wist niet dat dat ook mocht. Dat is lekker makkelijk. Bedankt!

Jeroen van Rensen

09-06-2020 12:24

De officiële manier:


<input id="select" type='checkbox' class='checkAll' />
<label for="select">Select All</label><br />

R Rob Doemaarwat

09-06-2020 12:56 gewijzigd op 09-06-2020 13:03

"Er omheen" is ook gewoon "officieel": https://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

To associate a label with another control implicitly, the control element must be
within the contents of the LABEL element. In this case, the LABEL may only contain
one control element. The label itself may be positioned before or after the
associated control.

In this example, we implicitly associate two labels with two text input controls:

<FORM action="..." method="post">
<P>
<LABEL>
   First Name
   <INPUT type="text" name="firstname">
</LABEL>
<LABEL>
   <INPUT type="text" name="lastname">
   Last Name
</LABEL>
</P>
</FORM>

Dat is wel heel oude meuk zie ik (HTML4). Het werkt echter nog steeds. Hier nog wat hipper spul: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Alternatively, you can nest the <input> directly inside the <label>, in which case
the for and id attributes are not needed because the association is implicit:

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

Reageren

Inloggen om te reageren