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

Question

我有一个包含 1 个复选框的 div。每当我单击 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？

Answer 1

你可以做得更短:

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