uncheck checkbox wanneer een andere wordt aangevinkt

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Harry Hartman

Harry Hartman

18/01/2011 16:25:34
Quote Anchor link
Wat is de simpelste manier, met JS of AJAX (denk ik), een geselecteerde checkbox te unchecken wanneer er in datzelfde rijtje een andere wordt aangevinkt?
Inderdaad, het principe van de radio buttons maar dan in checkboxes...
 
PHP hulp

PHP hulp

28/03/2024 15:42:00
 
Kris Peeters

Kris Peeters

18/01/2011 17:07:12
Quote Anchor link
Een voorbeeld, met jQuery

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
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
      $(document).ready(function(e) {
        $('#mijn_checkboxes input').click(function(event) {
          var nieuwe_waarde = $(event.target).attr('checked');  // bv. indien op de vierde checkbox is geklikt => index_checkbox_geklikt = 3
          // alle checkboxes uit zetten
          $('#mijn_checkboxes input').attr('checked', false);
          // juiste waarde in de doel-checkbox zetten
          $(event.target).attr('checked', nieuwe_waarde);
        });
      });
    </script>
  </head>
  <body>
    <div id="mijn_checkboxes">
      <input type="checkbox" name="naam1" value="1"/> 1 <br/>
      <input type="checkbox" name="naam2" value="2"/> 2 <br/>
      <input type="checkbox" name="naam3" value="3"/> 3 <br/>
      <input type="checkbox" name="naam4" value="4"/> 4 <br/>
      <input type="checkbox" name="naam5" value="5"/> 5 <br/>
      <input type="checkbox" name="naam6" value="6"/> 6 <br/>
      <input type="checkbox" name="naam7" value="7"/> 7 <br/>
    </div>
  </body>
</html>
 
- SanThe -

- SanThe -

18/01/2011 17:25:27
Quote Anchor link
Harry Hartman op 18/01/2011 16:25:34:
Inderdaad, het principe van de radio buttons maar dan in checkboxes...


En wat is het nut hier van checkbox ten opzichte van radio.
Gewijzigd op 18/01/2011 17:48:09 door - SanThe -
 
Jason  van der Zeeuw

Jason van der Zeeuw

18/01/2011 19:35:24
Quote Anchor link
haha staan 4kante knopjes beter op je site :P?
 
Niels K

Niels K

18/01/2011 19:36:22
Quote Anchor link
@Jason

Dan kan je dat toch beter via css regelen?
 
Jason  van der Zeeuw

Jason van der Zeeuw

18/01/2011 19:38:15
Quote Anchor link
ja goeie... ik snap eigenlijk niet waarvoor dit nodig is :P?
 

18/01/2011 19:52:37
Quote Anchor link
Hij gaat http://thepiratebay.org/ klonen!
 
Harry Hartman

Harry Hartman

18/01/2011 20:25:07
Quote Anchor link
Het nut van deze wijze is (voor mij) dat ik in mijn vragenlijst steeds dezelfde case checkboxes gebruik maar er af en toe vragen bij zitten die geen meerdere antwoorden mogen, dus maar 1 checkbox.
Er zal ongetwijfeld een betere manier zijn, echter moet ik dit in mijn bestaande script inpassen... vandaar...

@Kris, bedankt, ik ga er morgen mee aan de slag.
 
Bas Cost Budde

Bas Cost Budde

18/01/2011 21:31:43
Quote Anchor link
Wanneer je maar 1 antwoord toestaat, is de groep radioknoppen het aangewezen element hoor.

Ik vind een lijst met checkboxes waarvan er af en toe maar eentje actief mag zijn bere-irritant. Maar goed, daar ben ik dan ook ambtenaar voor: dat is niet volgens De Regels :)
 
Harry Hartman

Harry Hartman

19/01/2011 14:38:41
Quote Anchor link
In dit stukje van Kris staat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<script>
      $(document).ready(function(e) {
        $('#mijn_checkboxes input').click(function(event) {
          var nieuwe_waarde = $(event.target).attr('checked');  // bv. indien op de vierde checkbox is geklikt => index_checkbox_geklikt = 3
          // alle checkboxes uit zetten
          $('#mijn_checkboxes input').attr('checked', false);
          // juiste waarde in de doel-checkbox zetten
          $(event.target).attr('checked', nieuwe_waarde);
        });
      });
    </script>

En verwijst naar de betreffende div id

Aangezien ik het script in een lus gebruik wil ik aan "#mijn_checkboxes" een variabele toevoegen zodat het iedere keer uniek is...
Dat lukt mij dus niet!

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
var vraagnummer = "<?= $id ?>";
$('#mijn_checkboxes_'+vraagnummer+' input').click(function(event) {

werkt dus niet... en komt dan niet overeen met de bijhorende div id.
Wat doe ik nou niet goed?

Dit is mijn test opstelling:
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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<?php

function MaakRij($id)
{

    ?>

    <script>
      var vraagnummer = "<?= $id ?>";
      $(document).ready(function(e) {
        $('#mijn_checkboxes_'+vraagnummer+' input').click(function(event) {
          var nieuwe_waarde = $(event.target).attr('checked');  // bv. indien op de vierde checkbox is geklikt => index_checkbox_geklikt = 3
          // alle checkboxes uit zetten
          $('#mijn_checkboxes_'+vraagnummer+' input').attr('checked', false);
          // juiste waarde in de doel-checkbox zetten
          $(event.target).attr('checked', nieuwe_waarde);
        });
      });
    </script>

    <? echo("<div id='mijn_checkboxes_$id'>"); ?>
      <input type="checkbox" name="naam1" value="1"/> 1 <br/>
      <input type="checkbox" name="naam2" value="2"/> 2 <br/>
      <input type="checkbox" name="naam3" value="3"/> 3 <br/>
      <input type="checkbox" name="naam4" value="4"/> 4 <br/>
      <input type="checkbox" name="naam5" value="5"/> 5 <br/>
      <input type="checkbox" name="naam6" value="6"/> 6 <br/>
      <input type="checkbox" name="naam7" value="7"/> 7 <br/>
    </div><br/>
    <?php
}

for($x = 1; $x < 6; $x++)
{

    MaakRij($x);
}


?>



Toevoeging op 19/01/2011 15:01:09:

Na even een buiten een sigaretje gerookt te hebben bedacht ik mij... $@$% het zijn natuurlijk steeds dezelfde '+vraagnummer+', die moet ook uniek worden door een toevoeging van $id... en jawel... het werkt!

Is dit de beste notatie of kan het beter:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
      var vraagnummer<?= $id ?> = "<?= $id ?>";
      $(document).ready(function(e) {
        $('#mijn_checkboxes_'+vraagnummer<?= $id ?>+' input').click(function(event) {
          var nieuwe_waarde = $(event.target).attr('checked');  // bv. indien op de vierde checkbox is geklikt => index_checkbox_geklikt = 3
          // alle checkboxes uit zetten
          $('#mijn_checkboxes_'+vraagnummer<?= $id ?>+' input').attr('checked', false);
          // juiste waarde in de doel-checkbox zetten
          $(event.target).attr('checked', nieuwe_waarde);
        });
      });
    </script>
Gewijzigd op 19/01/2011 14:46:09 door Harry Hartman
 
Kris Peeters

Kris Peeters

20/01/2011 10:55:11
Quote Anchor link
Ik zal het eens wat herschrijven zodat je meerdere selectors (= bv. '#mijn_checkboxes input') kan invullen.


EDIT
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
      $(document).ready(function(e) {
        // TO DO: de juiste selectors meegeven
        checkbox2radio (
          Array(
            '#mijn_checkboxes input', // geef selector 1
            '.tweede_checkbox'        // geef selector 2
          )                           // uiteraard kan je ook meer dan 2 selectors gebruiken. 1 mag ook.
        );
      });
      
      // global
      var myObjects = Array();
      /**
      *  Maakt van een checkbox iets wat zich gedraagt als een radio button
      *  @selectors: array van (string) jquery selectors.  Net zoals je ze in css kan aanspreken
      */
      function checkbox2radio (selectors) {
        for (var i=0; i<selectors.length; i++) {
          var newKey = myObjects.length;
          myObjects[newKey] = selectors[i];
        }
        for (var i=0; i<selectors.length; i++) {
          curent_selector = selectors[i];
          $(curent_selector).click(function(event) {
            var selector = findSelector(event.target, myObjects);
            var nieuwe_waarde = $(event.target).attr('checked');  // bv. indien op de vierde checkbox is geklikt => index_checkbox_geklikt = 3
            // alle checkboxes uit zetten
            $(selector).attr('checked', false);
            // juiste waarde in de doel-checkbox zetten
            $(event.target).attr('checked', nieuwe_waarde);
          });
        }
      }
      
      /**
      *  geeft terug welke selector gebruikt is.
      *  (Het zou leuk zijn mocht zo'n functie ingebouwd zou zijn in jQuery.)
      */
      function findSelector (needle, haystack) {
        for (var i=0; i<haystack.length; i++) {
          var itemsInSelector = $(haystack[i]).length;
          for (var j=0; j<itemsInSelector; j++) {
            if ( $($(haystack[i])[j])[0] == $(needle)[0] ) {
              return haystack[i];
            }
          }
        }
      }
      
    </script>
  </head>
  <body>
  
    <div id="mijn_checkboxes">
      Eerste reeks: alle inputs binnen een element (div) met id="mijn_checkboxes"<br/>
      <input type="checkbox" name="naam1" value="1"/> 1 <br/>
      <input type="checkbox" name="naam2" value="2"/> 2 <br/>
      <input type="checkbox" name="naam3" value="3"/> 3 <br/>
      <input type="checkbox" name="naam4" value="4"/> 4 <br/>
      <input type="checkbox" name="naam5" value="5"/> 5 <br/>
      <input type="checkbox" name="naam6" value="6"/> 6 <br/>
      <input type="checkbox" name="naam7" value="7"/> 7 <br/>
    </div>

    <hr/>
    <div>
      Tweede reeks.  Checkboxes met class="tweede_checkbox"<br/>
      <input type="checkbox" class="tweede_checkbox" name="naamA" value="A"/> A <br/>
      <input type="checkbox" class="tweede_checkbox" name="naamB" value="B"/> B <br/>
      <input type="checkbox" class="tweede_checkbox" name="naamC" value="C"/> C <br/>
      <input type="checkbox" class="tweede_checkbox" name="naamD" value="D"/> D <br/>
    </div>

  </body>
</html>


Snap je hoe je dit kunt gebruiken?
Bij het aanroepen van checkbox2radio() geef je een array mee van mogelijke selectors, zie voorbeeld.

--------------------------

Die functie findSelector is nogal van het type quick and dirty. Weet iemand iets beters?

Hoe kan je binnen een callback weten wat de selector was?
Gewijzigd op 20/01/2011 16:29:28 door Kris Peeters
 



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.