[英]Check Radio Button when clicking DIV
I'm writing a quiz application using php / jquery. 我正在使用php / jquery编写一个测验应用程序。 The answer selections are contained like so: 答案选择包含如下:
<ul id="answers">
<li>
<div>
<input type='radio' name='answer_id' value='313'> True
</div>
</li>
<li>
<div>
<input type='radio' name='answer_id' value='314'> False
</div>
</li>
</ul>
After being styled w/ css, these answers appear in a container with one answer per line. 在用w / css设置样式后,这些答案出现在一个容器中,每行一个答案。 Each answer has its own box inside the container. 每个答案在容器内都有自己的盒子。 I want the user to be able to click anywhere inside the individual answer div and have the radio select become checked. 我希望用户能够单击单个答案div内的任何位置并选中收音机选项。
How can I activate the radio button check when a user clicks in the radio button's container div, using jquery? 当用户使用jquery点击单选按钮的容器div时,如何激活单选按钮检查?
Instead of using jQuery, this can all be done in native HTML using the <label>
element. 而不是使用jQuery,这可以使用<label>
元素在本机HTML中完成。 Here is a sample of it in action. 这是一个实际的样本 。
<ul id="answers">
<li>
<label>
<input type='radio' name='answer_id' value='313'> True
</label>
</li>
<li>
<label>
<input type='radio' name='answer_id' value='314'> False
</label>
</li>
</ul>
Correct usage of the label tag is: 正确使用标签标签是:
<input type="checkbox" id="checkme" name="checkme" /> <label for="checkme">Toggle this checkbox on/off</label>
for="..." always makes reference to the input's id. for =“...”始终引用输入的id。
I agree with tj111, but if does not always suit: 我同意tj111,但如果并不总是适合:
Here is the alternative code using div and jQuery: 这是使用div和jQuery的替代代码:
$('input:radio').click(ev){
ev.stopPropagation();
}).parent().click(function(ev){
ev.preventDefault();
$(this).children('input').click();
$(this).addClass('active').siblings().removeClass('active');
});
With the "active" class now you can even hide the radios and use stylesheet for highlighting. 现在使用“活动”类,您甚至可以隐藏无线电并使用样式表进行突出显示。
maybe something like: 也许是这样的:
$('#answers li div').click(function(){
var r = $(this).find('input[type=radio]');
if($(r).is(":checked"))
{
$(r).attr("checked", "");
}
else
{
$(r).attr("checked", "checked");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.