Check Radio button on div click
you can use prop()
method, try the following:
$('.big').click(function() {
$('.hli').removeClass('hli');
$(this).addClass('hli').find('input').prop('checked', true)
});
DEMO
please note that IDs must be unique and in order to work properly radio buttons should have name properties:
<input id="chb1" type="radio" name="radioGroup"/>
<input id="chb2" type="radio" name="radioGroup"/>
Tell me that if u want this: http://jsfiddle.net/QqVCu/6/
jQuery (Updated)
$('.big').click(function() {
if($(this).find('input[type="radio"]').is(':checked')){
$(this).find('input[type="radio"]').prop('checked', false);
}
else{
$(this).find('input[type="radio"]').prop('checked', true);
}
$('.hli').toggleClass('hli');
$(this).toggleClass('hli');
});
How about that: http://jsfiddle.net/sgospodarets/QqVCu/5/ ? All that is necessary - wrap inputs in label. Then do not need JavaScipt.
Using a pure HTML/CSS solution:
.isHidden {
display: none; /* hide radio buttons */
}
.label {
display: inline-block;
background-color: red;
width: 120px;
height: 120px;
padding: 5px 10px;
}
.radio:checked + .label { /* target next sibling (+) label */
background-color: blue;
}
<input id="radio_1" class="radio isHidden" name="radio_a" type="radio">
<label for="radio_1" class="label">1</label>
<input id="radio_2" class="radio isHidden" name="radio_a" type="radio">
<label for="radio_2" class="label">2</label>