Als radiobutton is checked

Door Yoeri Achterbergen op 26-02-2015 17:03

1.958 views

Hallo,

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

Thomas van den Heuvel

26-02-2015 17:22

Je kunt dit bijna 1-op-1 vertalen uit je beschrijving:

<!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>

Yoeri Achterbergen

27-02-2015 10:23

Bedankt voor de reactie!

Dit is wat ik heb:

HTML:



<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>

CSS:


.selected{
background-color:#FFFC00;
}

JQUERY:


$(".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');
        }

            
    });

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

Thomas van den Heuvel

27-02-2015 10:35

Als je de verschillende radio-buttons die bij elkaar horen in verschillende tabelcellen hebt staan (=verschillende parents) zul je een andere aanpak moeten hanteren.

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.

Yoeri Achterbergen

27-02-2015 16:14 gewijzigd op 27-02-2015 17:36

Opgelost ;-)

Reageren

Inloggen om te reageren