Als radiobutton is checked
Weet iemand een simpele manier om een live validation op een radiobutton te maken?
wat ik wil is zodra er op de radiobutton geklikt is, dat de parrent een addclass "selected" krijgt.
Via jquery heb ik dit geprobeerd maar werkt niet met een live validation maar pas als er bijvoorbeeld gesubmit word.
Wie kan mij hiermee helpen ?
Gr. Yoeri
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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.selected { background-color: #ccffcc; }
</style>
</head>
<body>
<form>
<div class="checkme">
<input type="radio" name="bla" id="bla_1" value="1"><label for="bla_1">1</label>
<input type="radio" name="bla" id="bla_2" value="2"><label for="bla_2">2</label>
<input type="radio" name="bla" id="bla_3" value="3"><label for="bla_3">3</label>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('div.checkme input').click(function() {
$(this).parent().addClass('selected');
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.selected { background-color: #ccffcc; }
</style>
</head>
<body>
<form>
<div class="checkme">
<input type="radio" name="bla" id="bla_1" value="1"><label for="bla_1">1</label>
<input type="radio" name="bla" id="bla_2" value="2"><label for="bla_2">2</label>
<input type="radio" name="bla" id="bla_3" value="3"><label for="bla_3">3</label>
</div>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('div.checkme input').click(function() {
$(this).parent().addClass('selected');
});
});
//]]>
</script>
</body>
</html>
Dit is wat ik heb:
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<tr><div class="checkme">
<input type="radio" name="bla" id="bla_1" value="1" checked="checked"/><label for="bla_1">1</label>
</div>
</tr>
<br/>
<tr><div class="checkme">
<input type="radio" name="bla" id="bla_2" value="2" /><label for="bla_2">2</label>
</div>
</tr>
<input type="radio" name="bla" id="bla_1" value="1" checked="checked"/><label for="bla_1">1</label>
</div>
</tr>
<br/>
<tr><div class="checkme">
<input type="radio" name="bla" id="bla_2" value="2" /><label for="bla_2">2</label>
</div>
</tr>
CSS:
Code (php)
1
2
3
2
3
.selected{
background-color:#FFFC00;
}
background-color:#FFFC00;
}
JQUERY:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(".checkme:first").addClass('selected');
$('.checkme input').on('click', function() {
if($(".checkme").hasClass("selected")){
$('.checkme').removeClass("selected");
$(this).parent().addClass('selected');
}else{
$(this).parent().addClass('selected');
}
});
$('.checkme input').on('click', function() {
if($(".checkme").hasClass("selected")){
$('.checkme').removeClass("selected");
$(this).parent().addClass('selected');
}else{
$(this).parent().addClass('selected');
}
});
Zo zou ik het graag willen hebben alleen dan dat de div elementen in <td> staan.
Als ik de fiddle uitvoer werkt hij wel met de <div> maar niet met <td>.
Hierin heb ik de HTML en de JQUERY veranderd met voor de class td.checkme
Gr. Yoeri
Je zou bijvoorbeeld kunnen kijken naar de naam van je radio-button. Als er dan op een radio button met naam X geklikt wordt, kun je op grond van de naam alle parents (td's) die een input-veld bevatten met naam X een klasse geven.
Gewijzigd op 27/02/2015 17:36:50 door Yoeri Achterbergen