时间戳

首页 > 解决方案 > 如何通过单击包含它的 div 来选中/取消选中复选框？

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

问题描述

我有 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？

标签： javascripthtml

解决方案

你可以做得更短：

$(".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()否则直接更改复选框时遇到问题。在这种情况下，我使用鼠标还是键盘都没有关系。

推荐阅读