Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Check Radio button on div click

Tags:

html

jquery

css

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/

like image 780
John Avatar asked Jul 21 '12 11:07

John


People also ask

How to select radio button when label is clicked?

To select a radio button by clicking on its text in React:Add a label element for each radio button. The htmlFor prop of each label should be set to the id of each radio button. Click on the label element to select the radio button.

How do I group radio buttons in HTML?

Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group. Once the radio group is created, selecting any radio button in that group automatically deselects any other selected radio button in the same group.

How do I link a radio button to another page in HTML?

Assuming you have jQuery: <input type="radio" name="mything" value="1"/> <input type="radio" name="mything" value="0"/> $('input:radio[name="mything"]'). change( function(){ if ($(this).is(':checked') && $(this). val() == '1') { window.


2 Answers

How about that: http://jsfiddle.net/sgospodarets/QqVCu/5/ ? All that is necessary - wrap inputs in label. Then do not need JavaScipt.

like image 121
Serg Hospodarets Avatar answered Sep 20 '22 06:09

Serg Hospodarets


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>
like image 37
Roko C. Buljan Avatar answered Sep 21 '22 06:09

Roko C. Buljan