jQuery 检查 div 单击单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11591843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check Radio button on div click
提问by John
I would like radio button to check/uncheck whenever i click it's parent div. Radio buttons are originally hidden.
我希望单选按钮在我单击它的父 div 时选中/取消选中。单选按钮最初是隐藏的。
I was trying to achieve that by wrapping <label>around the div. It works, but jQ.toggleClassstops working.
我试图通过环绕<label>div来实现这一目标。它有效，但jQ.toggleClass停止工作。
HTML
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
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/
JSFIDDLE：http: //jsfiddle.net/QqVCu/2/
回答by Serg Hospodarets
How about that: http://jsfiddle.net/sgospodarets/QqVCu/5/? All that is necessary - wrap inputs in label. Then do not need JavaScipt.
怎么样：http: //jsfiddle.net/sgospodarets/QqVCu/5/？所有这一切都是必要的 - 将输入包装在标签中。那就不需要JavaScipt了。
回答by Roko C. Buljan
Using a pure HTML/CSS solution:
使用纯 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>回答by undefined
you can use prop()method, try the following:
您可以使用prop()方法，请尝试以下操作：
$('.big').click(function() {
$('.hli').removeClass('hli');
$(this).addClass('hli').find('input').prop('checked', true)
});
please note that IDs must be unique and in order to work properly radio buttons should have name properties:
请注意，ID 必须是唯一的，并且为了正常工作，单选按钮应该具有名称属性：
<input id="chb1" type="radio" name="radioGroup"/>
<input id="chb2" type="radio" name="radioGroup"/>
回答by SVS
Tell me that if u want this: http://jsfiddle.net/QqVCu/6/
告诉我，如果你想要这个：http: //jsfiddle.net/QqVCu/6/
jQuery(Updated)
jQuery（更新）
$('.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');
});
回答by naresh
Try this: http://jsfiddle.net/ZuXvM/
试试这个：http: //jsfiddle.net/ZuXvM/
To have a single radio button checked, you should group them by name (give same name for all the buttons that are part of the group)
要选中单个单选按钮，您应该按名称将它们分组（为属于该组的所有按钮命名相同）
回答by Simon
Try this:
尝试这个：
To bypass jQuery event bubbling I've used regular JS to trigger the click().
为了绕过 jQuery 事件冒泡，我使用了常规 JS 来触发 click()。
$('.big').click(function () {
$('.hli').toggleClass('hli');
$(this).toggleClass('hli');
var Id = $(this).find('input[type=radio]').attr('id');
document.getElementById(Id).click();
});
回答by Beaudinn Greve
If you want to use JQuery, this is how you should do it
如果你想使用 JQuery，你应该这样做
$('.big').on({
click: function () {
$('.hli').toggleClass('hli');
$(this).toggleClass('hli');
}
}, 'input[name="chb"]');
