Question

我有一个脚本，如果单击li则应该选中复选框，但这不会发生。

<ul>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
<li><input type="checkbox">Tyrannosaurus</li>
</ul>

<script>
$("li").click(function (e) {
        var cb = $(this).find(":checkbox")[0];
        if (e.target != cb) cb.checked = !cb.checked;
        $(this).toggleClass("selected", cb.checked);
    });
</script>

Answer 1

我会使用不同的选择器

https://jsfiddle.net/stevenkaspar/43dnggja/

$("li").on('click',function (e) {
   var cb = $(this).find("input[type='checkbox']");
   cb.prop('checked', !cb.prop('checked'));
   $(this).toggleClass("selected", cb.checked);
});

Answer 2

尝试关注jQuery：

jQuery('ul li').click(function () {
    //alert("hii");
  if (jQuery(this).find('input[type="checkbox"]').is(":checked")) {

    jQuery(this).find('input[type="checkbox"]').attr("checked", false);
  }
  else {
      jQuery(this).find('input[type="checkbox"]').prop("checked", true);
  }

   alert(jQuery(this).find('input[type="checkbox"]').is(":checked"));
});


jQuery('input[type=checkbox]').click(function (e) {
     e.stopPropagation();
 });

这是你的FIDDLE DEMO

Answer 3

您应该知道纯HTML可以实现标签切换框行为。

但是你需要模拟在父节点上切换的类。

$("input[type=\"checkbox\"]").on("change", function() {
    $(this).parent().toggleClass("selected", $(this).prop("checked"));
});

SNIPPET ALTERNATIVE 选择li点击的复选框

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

.selected {
  background: black;
  color: white;
}
li,
input,
label {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input id="cb1" type="checkbox">
    <label for="cb1">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb2" type="checkbox">
    <label for="cb2">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb3" type="checkbox">
    <label for="cb3">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb4" type="checkbox">
    <label for="cb4">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb5" type="checkbox">
    <label for="cb5">Tyrannosaurus</label>
  </li>
  <li>
    <input id="cb6" type="checkbox">
    <label for="cb6">Tyrannosaurus</label>
  </li>
</ul>

要检查的脚本复选框，点击不能正常工作

3 个答案: