Question

我正在使用php / jquery编写测验应用程序。答案选择包含如下：

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

在使用w / css进行样式设置后，这些答案会出现在每行一个答案的容器中。每个答案在容器内都有自己的盒子。我希望用户能够单击单个答案div中的任何位置，并选中无线电选择。

当用户使用jquery点击单选按钮的容器div时，如何激活单选按钮检查？

Answer 1

不是使用jQuery，而是可以使用<label>元素在本机HTML中完成。 Here is a sample它的实际效果。

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

Answer 2

标签标签的正确用法是：

<input type="checkbox" id="checkme" name="checkme" /> <label for="checkme">Toggle this checkbox on/off</label>

for =“...”始终引用输入的id。

Answer 3

我同意tj111，但如果并不总是适合：

风格更难。
标签仅在其中有文字时才有效（感谢Michael）

以下是使用div和jQuery的替代代码：

$('input:radio').click(ev){
    ev.stopPropagation();
}).parent().click(function(ev){
    ev.preventDefault();
    $(this).children('input').click();
    $(this).addClass('active').siblings().removeClass('active');
});

现在使用“活动”类，您甚至可以隐藏无线电并使用样式表进行突出显示。

Answer 4

可能是这样的：

$('#answers li div').click(function(){

  var r = $(this).find('input[type=radio]');
  if($(r).is(":checked"))
  {
    $(r).attr("checked", "");
  }
  else
  {
    $(r).attr("checked", "checked");
  }

});

单击DIV时检查单选按钮

4 个答案: