HTML checkbox onclick called in Javascript(在 Javascript 中调用 HTML 复选框 onclick)
问题描述
我在试图弄清楚如何让我的代码的某个部分工作时遇到了一些麻烦.
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>
这是我的 HTML,它可以正常工作(单击文本将单击框).它的 javascript 非常简单:
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
但是,当标签是使复选框被单击的原因时,我希望输入发生 onclick.目前,onClick js 没有运行.关于如何做到这一点的一个建议是什么?我试图将输入的 onclick 添加到标签的 onclick 中,但这不起作用.
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.
任何建议/解决方案都会很棒.
Any suggestions/solutions would be wonderful.
推荐答案
如何把checkbox 放入 label,制作标签自动为复选框点击敏感",并为复选框提供 onchange 事件?
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
这将另外捕获用户使用键盘切换复选框,而 onclick 不会.
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
这篇关于在 Javascript 中调用 HTML 复选框 onclick的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:在 Javascript 中调用 HTML 复选框 onclick
基础教程推荐
- Bootstrap 模态出现在背景下 2022-01-01
- npm start 错误与 create-react-app 2022-01-01
- Fabric JS绘制具有活动形状的多边形 2022-01-01
- 如何添加到目前为止的天数? 2022-01-01
- 原生拖动事件后如何获取 mouseup 事件? 2022-01-01
- Bokeh Div文本对齐 2022-01-01
- 在 contenteditable 中精确拖放 2022-01-01
- 检查 HTML5 拖放文件类型 2022-01-01
- 即使用户允许,Gmail 也会隐藏外部电子邮件图片 2022-01-01
- fetch 是否支持原生多文件上传? 2022-01-01
