HTML 复选框 onclick 在 Javascript 中调用

Question

我在尝试弄清楚如何使我的代码的某个部分正常工作时遇到了一些麻烦。

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>

这是我的 HTML，它可以正常工作（单击文本将单击该框）。它的 javascript 非常简单：

function toggleCheckbox(id) {
    document.getElementById(id).checked = !document.getElementById(id).checked;
}

但是，当标签使复选框被单击时，我希望输入发生 onclick。目前 onClick js 还没有运行。关于如何做到这一点的建议是什么？ 我尝试将输入的 onclick 添加到标签的 onclick，但这不起作用。

任何建议/解决方案都会很棒。

Answer 1

如何将复选框放入标签中，使标签自动为复选框“点击敏感”，并为复选框指定一个onchange 事件？

<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....> 

function toggleCheckbox(element)
 {
   element.checked = !element.checked;
 }

这还会捕获用户使用键盘来切换复选框，而 onclick 则不会。

Answer 2

没有 onclick 的标签将按照您的预期运行。它改变了输入。您真正想要的是在单击标签时执行 selectAll()，对吗？
然后只将select all添加到onclick标签上。或者将输入包装到标签中并仅为标签分配 onclick

<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
  <input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
  Select All
</label>

Answer 3

jQuery 有一个函数可以做到这一点：

1. 在你的头脑中包含以下脚本：

   <脚本类型=“text/javascript”src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js”>
   

   （或者只是在线下载 jQuery.js 文件并将其包含在本地）

2. 使用此单击输入时切换复选框的脚本：

   var 切换 = false;
   $("#INPUTNAMEHERE").click(function() {
           $("input[type=checkbox]").attr("选中",!toggle);
           切换=！切换；
   }); 
   

如果我理解您想要执行的操作，那么应该可以执行您想要的操作。

Answer 4

您还可以从 HTML 中提取事件代码，如下所示：

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>

<script>
function selectAll(frmElement, chkElement) {
    // ...
}
document.getElementById("check_all_1").onclick = function() {
    selectAll(document.wizard_form, this);
}
</script>