[jQuery] Radio checked checkbox
Ik heb dus een checkbox en wat radiobuttons.
Als 1 der radiobuttons gechecked wordt wil ik dat de checkbox gevinkt wordt.
Dat werkt nu, maar pas als ik de 2de keer erop druk.
Radio:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<td colspan="2">
<input type="radio" value ="3xWeek" name="frequency" class="frequency"/>3x per week
<input type="radio" value ="2xWeek" name="frequency" class="frequency"/>2x per week
<input type="radio" value ="1xWeek" name="frequency" class="frequency"/>1x per week
<input type="radio" value ="2xMonth" name="frequency" class="frequency"/>2x per maand
<input type="radio" value ="1xMonth" name="frequency" class="frequency"/>1x per maand
</td>
<input type="radio" value ="3xWeek" name="frequency" class="frequency"/>3x per week
<input type="radio" value ="2xWeek" name="frequency" class="frequency"/>2x per week
<input type="radio" value ="1xWeek" name="frequency" class="frequency"/>1x per week
<input type="radio" value ="2xMonth" name="frequency" class="frequency"/>2x per maand
<input type="radio" value ="1xMonth" name="frequency" class="frequency"/>1x per maand
</td>
jQuery:
Juist nog wrappen in document.ready
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 Demo: Drag and drop</title>
</head>
<body>
<input type="checkbox" id="checkBox">
<hr>
<input type="radio" value ="3xWeek" name="frequency" class="frequency"/>3x per week
<input type="radio" value ="2xWeek" name="frequency" class="frequency"/>2x per week
<input type="radio" value ="1xWeek" name="frequency" class="frequency"/>1x per week
<input type="radio" value ="2xMonth" name="frequency" class="frequency"/>2x per maand
<input type="radio" value ="1xMonth" name="frequency" class="frequency"/>1x per maand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('.frequency').click(function(e) {
$('#checkBox').attr('checked', true);
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 Demo: Drag and drop</title>
</head>
<body>
<input type="checkbox" id="checkBox">
<hr>
<input type="radio" value ="3xWeek" name="frequency" class="frequency"/>3x per week
<input type="radio" value ="2xWeek" name="frequency" class="frequency"/>2x per week
<input type="radio" value ="1xWeek" name="frequency" class="frequency"/>1x per week
<input type="radio" value ="2xMonth" name="frequency" class="frequency"/>2x per maand
<input type="radio" value ="1xMonth" name="frequency" class="frequency"/>1x per maand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('.frequency').click(function(e) {
$('#checkBox').attr('checked', true);
});
});
</script>
</body>
</html>
Gewijzigd op 17/07/2012 10:16:21 door Kris Peeters
@chi waarom pas bij 2e keer klikken? dat is toch heel gebruiksonvriendelijk?
Ik wil juist bij de 1ste keer al dat het werkt!
$('.frequency').click(function() {
in dit
$('.frequency').click(function(e) {
Deze code werkt gewoon: http://jsfiddle.net/6UujZ/
Offtopic:
Je bent toch geen formulier aan het opmaken met tabellen? Want dan moet je dat heel snel gaan veranderen
Gewijzigd op 17/07/2012 10:55:22 door Wouter J
Zoals Wouter zegt, dat werkt (helaas) niet :)
is het dus de bedoeling dat de checkbox pas gechecked wordt vanaf dat de gebruiker twee keer op een radio geclickt heeft?
Dan kan je zoiets doen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(document).ready(function($) {
var alreadyClicked = false;
$('.frequency').click(function(e) {
if (alreadyClicked == true) {
$('#checkBox').attr('checked', true);
}
else {
alreadyClicked = true;
}
});
});
var alreadyClicked = false;
$('.frequency').click(function(e) {
if (alreadyClicked == true) {
$('#checkBox').attr('checked', true);
}
else {
alreadyClicked = true;
}
});
});
@Reshad: dit geeft ook direct een extra nut aan $(document).ready: een scope reserveren waarin je al je jQuery code afsluit
@Kris, NEE juist niet!!! Dat gebeurt nu maar dat moet NIET!
Hoe kan het nu dat het op jsfiddle wel werkt (ook met jquery 1.3) en bij mij niet? Ik heb exact dezelfde code :(
Het probleem dat je beschrijft, zie ik nergens; ik kan het niet reproduceren.
Tip: kleed je hele pagina eens uit tot je alleen de code hebt zoals die op fiddle staat. Werkt het dan wel bij jou? voeg dan 1 voor 1 de rest weer toe tot je iets toevoegt waardoor het niet meer goed werkt. Daar kan je dan verder mee (en eventueel hier plaatsen zodat iedereen kan meekijken naar waarom dat stuk dan het probleem geeft).
Bwah, groot bestand, vooruit dan maar.
of je plaatst het op pastebin.com!
Zit wat interne dingen in die ik helaas niet vrij kan geven, dus dat wordt hem zowieso niet. :)