复选框取消单击事件Javascript

Checkbox unclick event Javascript

本文关键字：Javascript 事件 单击 取消 复选框      更新时间：2023-09-26

我遇到了复选框取消选中事件的问题。当我取消单击复选框时，它应该会恢复。我该怎么做？

<body>
<script>
 function change()
    {
        var cb = document.querySelectorAll('input[type="checkbox"]')[0];
        var td = document.querySelectorAll("td[contenteditable]")[0];
        cb.addEventListener("click", function () {
            td.className = td.className + " crossed";
        });
    }
</script>
</body>

切换类，如：

cb.addEventListener("click", function () {
   td.classList.toggle("crossed");
});

JSFiddle演示
或者检查是否检查了checkbox：

cb.addEventListener("click", function () {
  if(cb.checked) td.classList.add("crossed");
  else td.classList.remove("crossed");
});

JSFiddle演示

如果你想保留旧的浏览器支持，你可以这样做：

   cb.addEventListener("click", function() {
     if (cb.checked) td.className += " crossed";
     else {
       var tdclass = td.className.split(" "),
         ind = tdclass.indexOf("crossed");
       tdclass.splice(ind, 1).join(" ");
       td.className = tdclass;
     }
   });

JSFiddle演示

虽然您已经接受了答案，但我建议对以下内容进行小幅调整：

function change() {
    // querySelector() returns the first element matching the
    // selector (or null, if no matching element is found):
    var cb = document.querySelector('input[type="checkbox"]'),
        td = document.querySelector("td[contenteditable]");
    // use the change event on the check-box:
    cb.addEventListener("change", function () {
        // adds, or removes, the class 'crossed'
        // based on the assessment that follows;
        // of the cb node is checked (true) the
        // class is added (if not already present),
        // otherwise it's removed:
        td.classList.toggle('crossed', cb.checked);
    });
}

好吧，当你点击一个勾号来取消点击时，你想重新启用它！！！

$("input[type='checkbox']").props('checked','false') {
    $("input[type='checkbox']").props('checked','true')
}

尝试使用id之类的选择器来代替：input[type='checkbox']

相关文章：