Javascript 在Javascript中调用的HTML复选框onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3197702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML checkbox onclick called in Javascript
提问by Craig
I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
我在试图弄清楚如何让我的代码的某个部分工作时遇到了一些麻烦。
<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>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
这是我的 HTML，它可以正常工作（单击文本将单击该框）。它的 javascript 非常简单：
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this? I tried to add the onclick of the input to the onclick of the label but that doesn't work.
但是，当标签是单击复选框的原因时，我希望对输入进行 onclick。目前 onClick js 没有运行。关于如何做到这一点的建议是什么？我试图将输入的 onclick 添加到标签的 onclick 中，但这不起作用。
Any suggestions/solutions would be wonderful.
任何建议/解决方案都会很棒。
回答by Unicron
How about putting the checkboxintothe label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchangeevent?
如何把checkbox进入的label，使标签自动“点击敏感”的复选框，并给予复选框中onchange的事件吗？
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclickwould not.
这将另外捕获使用键盘切换复选框的用户，有些则onclick不会。
回答by gblazex
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll()when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
没有 onclick 的标签将如您所愿。它改变了输入。你真正想要的是selectAll()当你点击一个标签时执行，对吗？然后只将全选添加到标签 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>
回答by rownage
jQuery has a function that can do this:
jQuery 有一个函数可以做到这一点：
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false; $("#INPUTNAMEHERE").click(function() { $("input[type=checkbox]").attr("checked",!toggle); toggle = !toggle; });
在您的脑海中包含以下脚本：
<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; });
That should do what you want if I understood what you were trying to do.
如果我理解你想要做什么，那应该做你想做的。
回答by mexique1
You can also extract the event code from the HTML, like this :
您还可以从 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>
