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

如何将checkbox 放入<{em} label，使标签自动为“点击敏感”复选框，并为复选框onchange事件

<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....> function toggleCheckbox(element) { element.checked = !element.checked; }

这将额外捕获用户使用键盘切换复选框，onclick不会。

Answer 2

没有onclick的标签将按预期运行。它改变了输入。你真正想要的是当你点击标签时执行selectAll()，对吧？然后只在标签上添加select all all。或者将输入包装到标签中并仅为标签分配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有一个可以执行此操作的功能：

在脑海中包含以下脚本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

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

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

var toggle = false;
$("#INPUTNAMEHERE").click(function() {
        $("input[type=checkbox]").attr("checked",!toggle);
        toggle = !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>

HTML复选框onclick在Javascript中调用

4 个答案: