Question

我正在尝试通过点击li来查看复选框。问题是，只有当有人点击label而不是完整li时才会选中该复选框（这是因为li的宽度超过了label ！

<ul>
  <li><input id="a1" type="checkbox"><label for="a1">1</label></li>
  <li><input id="a2" type="checkbox"><label for="a2">2</label></li>
  <li><input id="a3" type="checkbox"><label for="a3">3</label></li>
</ul>

我尝试使用下面的Javascript解决此问题，但它仍然只在单击label时检查复选框。

$("li").click(function(e) {
  var checked = !$(this).children("input").first().prop("checked");
  $(this).children("input").first().prop("checked", checked);
  $(this).toggleClass("selected", checked);
});

注意：如果可能的话，我想避免使用Javascript和Jquery。

Answer 1

您不需要脚本。您可以使用li打包复选框和所有label内容。给出标签display:block，这样它就会“占用”li的整个宽度，这样li就可以点击（比如，不是真的）

label {
  display:block;  
}

<ul>
  <li><label for="a1"><input id="a1" type="checkbox">1</label></li>
  <li><label for="a2"><input id="a2" type="checkbox">2</label></li>
  <li><label for="a3"><input id="a3" type="checkbox">3</label></li>
</ul>

Answer 2

试试这个;

添加class =＆＃34; myclass＆＃34;到ul。

$('ul.myclass li input').click(
    function(event){
        event.stopPropagation();
    });

Answer 3

我的解决方案确实使用直接JS，但它在HTML中内联，所以没有太复杂。

<li onclick="document.getElementById('a1').checked = !document.getElementById('a1').checked;">
    <input id="a1" type="checkbox" onclick="event.stopPropagation();"><label for="a1">1</label>
</li>

见这里：https://jsfiddle.net/Delorian/2v47Lwhb/

Answer 4

对标签的click事件使用event.preventDefault（）。
然后在复选框输入上使用css属性 z-index：2 ，以便复选框位于标签图层的顶部。

点击li后无法选中复选框

4 个答案: