uncheck checkbox wanneer een andere wordt aangevinkt
Inderdaad, het principe van de radio buttons maar dan in checkboxes...
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
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>
<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>
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 -
Dan kan je dat toch beter via css regelen?
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.
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 :)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
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>
$(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)
1
2
2
var vraagnummer = "<?= $id ?>";
$('#mijn_checkboxes_'+vraagnummer+' input').click(function(event) {
$('#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)
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
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);
}
?>
<?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)
1
2
3
4
5
6
7
8
9
10
11
12
13
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
EDIT
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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>
<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