Alle checkboxes selecteren en labels met jQuery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

G Jansma

G Jansma

08/06/2020 20:00:52
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 
PHP hulp

PHP hulp

26/09/2020 01:48:10
 
Rob Doemaarwat

Rob Doemaarwat

08/06/2020 20:11:53
Quote Anchor link
Het makkelijkst is om er gewoon een <label> omheen te plaatsen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
 
G Jansma

G Jansma

08/06/2020 20:21:09
Quote Anchor link
Kijk aan, wist niet dat dat ook mocht. Dat is lekker makkelijk. Bedankt!
 
Jeroen van Rensen

Jeroen van Rensen

09/06/2020 12:24:05
Quote Anchor link
De officiële manier:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<input id="select" type='checkbox' class='checkAll' />
<label for="select">Select All</label><br />
 
Rob Doemaarwat

Rob Doemaarwat

09/06/2020 12:56:22
Quote Anchor link
"Er omheen" is ook gewoon "officieel": https://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 09/06/2020 13:03:53 door Rob Doemaarwat
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.