javascript - 带有 li 的 jquery 复选框

Question

我有一系列的复选框，除了它们的默认行为被无意中改变之外，一切正常，所以我不能再检查它们，这很奇怪，因为我使用这个 jquery 的原因是当它们第一时间接受检查。

有什么想法吗？

//Tag cloud
$(".tag-cloud li").toggle(
  function () {
    //$(this).filter(":checkbox").attr('checked', 'true');
    $(this).addClass("selected");
    return;
    //return $(this).filter(":checkbox").attr("checked", true);
  },
  function () {
    //$(this).filter(":checkbox").attr('checked', 'false');
    $(this).removeClass("selected");
    return;
    //$("#sortable").submit();
  }
);

Answer 1

您可以从整体上简化它，并希望通过使用简单的 .click() 来消除奇怪的行为。事件处理程序，像这样:

$(".tag-cloud li").click(function() {
 var cb = $(this).find(":checkbox")[0];
 $(this).toggleClass("selected", cb.checked);
});

这有利于工作，无论它最初处于什么状态，如 .toggle() 。对于预先选中的框将关闭。

如果你想要 <li>本身是可点击的，我们需要确保在点击实际的复选框本身(如果它是暴露的)时不会进入循环或反转切换，如下所示:

$(".tag-cloud li").click(function(e) {
 var cb = $(this).find(":checkbox")[0];
 //if the click wasn't from the checkbox already, toggle it
 if(e.target != cb) cb.checked = !cb.checked;
 $(this).toggleClass("selected", cb.checked);
});