Alle checkboxes selecteren en labels met jQuery
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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>
<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>
Code (php)
1
<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
Gewijzigd op 08/06/2020 20:14:41 door Rob Doemaarwat
Code (php)
1
2
2
<input id="select" type='checkbox' class='checkAll' />
<label for="select">Select All</label><br />
<label for="select">Select All</label><br />
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
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
Code (php)
1
2
3
4
5
6
2
3
4
5
6
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>
the for and id attributes are not needed because the association is implicit:
<label>Do you like peas?
<input type="checkbox" name="peas">
</label>
Gewijzigd op 09/06/2020 13:03:53 door Rob Doemaarwat