Check the radio for pressing div

Question

I would like the switch to be set / unchecked when I click on its parent div. Radio buttons are initially hidden.

I tried to achieve this by wrapping <label> around a 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/

Answer 1

How about this: http://jsfiddle.net/sgospodarets/QqVCu/5/ ? All that is needed is to wrap the entries in the label. Then you do not need JavaScipt.

Answer 2

Edit

Below is a demo without javascript:

CSS

 .big input[name=chb]{ display:none; /* comment this line to see the radio buttons */ } .big label{ display:inline-block; background-color:red; width:120px; height:120px; padding:5px 10px; } .big input[type="radio"]:checked + label { background-color:blue; } 

HTML (note: label should appear after input )

 <div class="big"> <input id="chb_1" name="chb" type="radio" /> <label for="chb_1">This is a div 1 </label> </div> <br /> <div class="big"> <input id="chb_2" name="chb" type="radio" /> <label for="chb_2">This is a div 2 </label> </div> 

---

Using jQuery:

Instead of having multiple ID entries (which is WRONG), use the name attribute!
By correctly assigning your radio buttons, you join them in a happy family of radio stations.

jsFiddle demo HTML:

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

JQuery

 $('.big').click(function() { $('input[name="chb"]', this).prop("checked",true); $('.big').removeClass('hli'); $(this).addClass('hli'); }); 

From DOCS: http://api.jquery.com/prop/

Answer 3

Say if you 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"]').attr('checked', false); } else{ $(this).find('input[type="radio"]').attr('checked', true); } $('.hli').toggleClass('hli'); $(this).toggleClass('hli'); 

});

Answer 4

Try the following: http://jsfiddle.net/ZuXvM/

To set one radio button, you must group it by name (specify a name for all buttons in the group)

Answer 5

you can use prop() method, try the following:

 $('.big').click(function() { $('.hli').removeClass('hli'); $(this).addClass('hli').find('input').prop('checked', true) }); 

Demo

note that the identifiers must be unique and for the radio buttons to work properly they must have the name properties:

 <input id="chb1" type="radio" name="radioGroup"/> <input id="chb2" type="radio" name="radioGroup"/> 

Answer 6

Try the following:

http://jsfiddle.net/QqVCu/50/

To get around the jQuery bubbling event I used regular JS to fire click ().

 $('.big').click(function () { $('.hli').toggleClass('hli'); $(this).toggleClass('hli'); var Id = $(this).find('input[type=radio]').attr('id'); document.getElementById(Id).click(); });