Check Radio button on div click

user_1318239 0
Viewed 47811

I would like radio button to check/uncheck whenever i click it's parent div. Radio buttons are originally hidden.

I was trying to achieve that by wrapping <label> around the div. It works, but jQ.toggleClass stops working.

HTML

<div class="big">
This is a div 1
<input id="chb" type="radio" />
</div>

<br/>

<div class="big">
This is a div 2
<input id="chb" type="radio" />
</div>

CSS

.big {

    width:100px;
    height:100px;
    background-color:red;
    cursor:pointer;

}

.hli {

    border:2px solid blue;

}

/*.chb{display:none;}*/

JQ

$('.big').click(function() {
$('.hli').toggleClass('hli');   
$(this).toggleClass('hli');
});

JSFIDDLE: http://jsfiddle.net/QqVCu/2/

css html jquery
7 Answers

If you want to use JQuery, this is how you should do it

$('.big').on({
    click: function () {

      $('.hli').toggleClass('hli');
      $(this).toggleClass('hli');

    }
}, 'input[name="chb"]');
user_27513600
Related