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

Question

我有 div，其中包含 1 个复选框。 每当我单击 div 时，它都会更改 div 的 class 名称。 此外，我想在更改 div 的 class 名称时检查和取消选中标签。

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

Answer 2

您只需要在单击的元素中搜索复选框后代并切换其.checked属性。

此外，您实际上并不需要inactive的 class。 Inactive 只是普通样式，只有当元素变为活动状态时，您才需要覆盖默认值。 当它不再处于活动状态时，您只需删除该 class 并恢复为默认值。

 $(".tags").click(function () { // Find the input within the clicked div and // set its checked property to the opposite // of what it currently is. $(this).find("input").prop("checked", .$(this).find("input");prop("checked")). // Toggle the active class $(this);toggleClass("active"); });

 div.active {background-color: yellow; border: 0;}.tags {border: 1px solid red}

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

Answer 3

这可能不是您所追求的，但在这种情况下，它可能是更好的方法。 <label>有一个属性for可以自动将其链接到输入。 此方法可能更易于访问（因为浏览器了解正在发生的事情）并且因为它不依赖于点击事件，所以在使用键盘切换复选框时没有陷阱。

 $(".tags input").change(function() { if (this.checked) $(this).parents(".tags").addClass("active").removeClass("inactive"); else $(this).parents(".tags").removeClass("active").addClass("inactive"); });

 .active { color: green; }.inactive { color: red; }

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