单击div检查单选按钮

Question

每当我点击它的父div时,我想要单选按钮来检查/取消选中.单选按钮最初是隐藏的.

我试图通过缠绕<label>div 来实现这一目标.它有效,但jQ.toggleClass停止工作.

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

怎么样:http://jsfiddle.net/sgospodarets/QqVCu/5/？所有必要的 - 在标签中包装输入.然后不需要JavaScipt.

Answer 2

使用纯HTML/CSS解决方案:

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