Question

当我点击div元素时，我正试图找到一种更清晰，更简单的方法来检查和取消选中复选框。这是我目前正在使用的代码，用于检查，但取消选中不起作用。

我明白我所写的内容可以更快，更简单的方式完成，但我不知道如何。

注意：我正在使用一个将通过javascript插入的复选框。

HTML：

<div class="container">

  <input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm"><div class="click-me unchecked">Click here to check the checkbox.</div>

</div>

jQuery的：

(function() {

$('.click-me').before('<input type="checkbox" class="confirm" name="ld_Confirm" id="ld_Confirm">');

$(".container .click-me.unchecked").click(function() {
  $(".confirm").prop("checked", true);
  $(".click-me").toggleClass("unchecked");
  $(".click-me").toggleClass("checked");
});

$(".container .click-me.checked").click(function() {
  $(".confirm").prop("checked", false);
  $(".click-me").toggleClass("unchecked");
  $(".click-me").toggleClass("checked");
});

})();

Answer 1

问题是您在文档加载时创建了一个click事件处理程序，但由于您正在切换容器的类，因此处理程序未绑定到div。换句话说：在加载代码时，没有div个类unchecked，因此事件处理程序不会绑定任何东西。

快速解决方案是使用事件委派动态绑定处理程序：

$(".container").on('click','.click-me.unchecked',function() {
    $(".confirm").prop("checked", true);
    $(".click-me").toggleClass("unchecked");
    $(".click-me").toggleClass("checked");
});
$(".container").on('click','.click-me.checked',function() {
    $(".confirm").prop("checked", false);
    $(".click-me").toggleClass("unchecked");
    $(".click-me").toggleClass("checked");
});

然而，存在更好的方法。只需将复选框的checked属性设置为自己的反转，即可极大地简化代码。通过这样做，您可以完全取消委托的需要，实际上需要checked和unchecked类（假设您还没有将它们用于样式或其他脚本）：

$(".container").on('click','.click-me',function() {
    $(".confirm").prop("checked", !$(".confirm").prop("checked"));
});

http://jsfiddle.net/mblase75/bNkxG/

Answer 2

$('.click-me').click(function() {
    var checkBoxes = $(".confirm");
    checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});

来自here

您可以随时尝试搜索google或SO，以获取“jquery切换复选框”

这个div不会出现在文档加载

上

$(document).on( 'click' , '.click-me', (function() {
    var checkBoxes = $(".confirm");
    checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});

如果在页面加载时出现带有'.confirm'类的复选框，那么这一点无关紧要，只要触发此点击就行了

如何在单击其他元素时切换单个复选框？

2 个答案: