javascript - 复选框不适用于多个复选框onclick
问题描述
function myFunction(){
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}}
Checkbox 1: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox 1 is CHECKED!</p>
<br>
Checkbox 2: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox 2 is CHECKED!</p>
我希望两个复选框在一个一个单击后都可以工作。 我得到的结果:只有复选框 1 工作,另一个不工作。
解决方案
id
属性必须是唯一的,所以在这种情况下getElementById
只选择第一个元素。您可以将id
属性更改为class
,然后使用 选择复选框和段落getElementsByClassName
。
Checkbox 1: <input type="checkbox" class="myCheck" onclick="myFunction()">
<p class="text" style="display:none">Checkbox 1 is CHECKED!</p>
<br>
Checkbox 2: <input type="checkbox" class="myCheck" onclick="myFunction()">
<p class="text" style="display:none">Checkbox 2 is CHECKED!</p>
现在 JavaScript 部分需要识别复选框。我们应该添加一个 FOR 循环来选择复选框[i] 和它下面的段落。
for (var i=0;i<checkBox.length; i++) {
if (checkBox[i].checked == true){
text[i].style.display = "block";
} else {
text[i].style.display = "none";
}
}
推荐阅读
- django - Django:ValueError:预取查询集不能使用 raw()、values() 和 values_list()
- mysql - 使用 read_default_file 处理带有特殊字符 (#) 的密码问题
- layout - swt 布局等价于 css subgrid
- mongodb - 如何在多级/嵌套文档上执行 mongodb 聚合?
- python - 将 JSON 链接转换为 Pandas DataFrame
- python - 如何更改jsonl文件中的数字并保存
- android - 根据不同的屏幕尺寸缩放android元素
- ios - '无效的文档参考。尝试编辑/删除新条目时,文档引用必须具有偶数段
- python - TensorflowLite inference官方教程讲解
- javascript - 处理快速 GET 路由中的 SQL 比较运算符 - 过滤