如何通过单击包含复选框的div来选中/取消选中复选框？

debugcn 发表于 Dev

孵出

我的div包含1个复选框。每当我单击div时，它将更改div的类名称。另外，我想在更改div的类名时选中和取消选中标签。

$(".tags").click(function() {

      if ($(this).hasClass("active")) {
        $(this).removeClass("active");
        $(this).addClass("inactive");
      } else if ($(this).hasClass("inactive")) {
        $(this).removeClass("inactive");
        $(this).addClass("active");
      }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .active{
    color: green;
  }
  .inactive{
    color: red;
  }
</style>
<div class="tags active" name="item1"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags active" name="item2"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags active" name="item3"> Item3 <input type="checkbox" name="item3"></div>

我如何在每个div内找到一个复选框，然后选中/取消选中该div？

汽车10分钟

您可以做得更短：

$(".tags").click(function () {
  $(this).toggleClass("active inactive")
         .find("input:checkbox").prop("checked",$(this).hasClass("active"))
})

.active {background-color: yellow}
.inactive {border: 1px solid red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags inactive" name="item1"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags inactive" name="item2"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags inactive" name="item3"> Item3 <input type="checkbox" name="item3"></div>

更新：
我从更改为.attr()，prop()因为否则直接更改复选框时会遇到问题。在这种情况下，我使用鼠标还是键盘都没有关系。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。