1

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

http://codepen.io/jimmykup/full/xkoqJ

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

注意：我正在使用将通过 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");
});

})();
4

2 回答 2

1

问题是您click在文档加载时创建了一个事件处理程序，但是由于您正在切换容器的类，因此处理程序没有绑定到div. 换句话说：在加载代码时，没有div带有 class 的 s 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/

于 2012-10-05T17:30:22.600 回答
0 
$('.click-me').click(function() {
    var checkBoxes = $(".confirm");
    checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});

从这里

您可以随时尝试搜索 google 或 SO ，以获取“jquery toggle checkbox”

以防此 div 在文档加载时不会出现

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

页面加载时是否存在带有“.confirm”类的复选框并不重要，只要在触发此点击时存在

于 2012-10-05T17:24:31.417 回答