我在使用复选框时遇到问题
[英]I am getting a problem while using checkboxes
问题描述
（我是 javascript 的初学者）我在一个表单中有 11 个复选框以及 11 个文本框/文本字段，每个复选框旁边都有 css 中的display:none(text fields) 。 当用户使用javascript单击相应的复选框时，我试图显示特定的文本字段，但它并未显示所有复选框，它仅适用于第一个复选框。 这是我的 html 代码：
<label class="container2">I-A
<input type="checkbox" value="IA" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">I-B
<input type="checkbox" value="IB" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">I-C
<input type="checkbox" value="IC" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">I-D
<input type="checkbox" value="ID" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-A
<input type="checkbox" value="IIA" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-B
<input type="checkbox" value="IIB" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-C
<input type="checkbox" value="IIC" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">II-D
<input type="checkbox" value="IID" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">III-A
<input type="checkbox" value="IIIA" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">III-B
<input type="checkbox" value="IIIB" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
<label class="container2">III-C
<input type="checkbox" value="IIIC" name="checkbox[]" id="mycheck" onclick="myFunction()">
<span class="checkmark"></span>
</label>
<input type="text" name="dep[]" id="field">
这是我的javascript：
function myFunction(){
var checkBox=document.getElementById("mycheck");
var field= document.getElementById("field");
if(checkBox.checked== true){
field.style.display="inline";
}
else{
field.style.display="none";
}
}
7 个解决方案
解决方案1
3 已采纳 2020-09-11 13:40:13
@Abhishek，您的问题可能有很多解决方案。 我写了一个简单的解决方案，适用于您的决定。 请检查我所做的以下编辑。
-
myFunction- 您可以接收event作为参数。 -
event.target- 这是您选中/取消选中的复选框。 -
checkBox.value- 这是你写的值（例如 -<input type="checkbox" value="IA"） -
'field-' + checkBox.value- 这将让您选择输入字段的id。 （例如 -field-IA） - 运行以下代码段后，所有内容都可能与您想要的相同。
** 还有一件事需要提及：请不要为每个元素使用相同的id 。 您可以将 ID 命名为field-for-something或mycheck-for-something 。
function myFunction(event){ var checkBox = event.target; var field = document.getElementById('field-' + checkBox.value); if(checkBox.checked == true){ field.style.display="inline"; } else{ field.style.display="none"; } }
body { display: flex; flex-direction: column; } input[name="dep[]"] { display: none; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <label class="container2">IA <input type="checkbox" value="IA" name="checkbox[]" id="mycheck-IA" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IA"> <label class="container2">IB <input type="checkbox" value="IB" name="checkbox[]" id="mycheck-IB" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IB"> <label class="container2">IC <input type="checkbox" value="IC" name="checkbox[]" id="mycheck-IC" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IC"> <label class="container2">ID <input type="checkbox" value="ID" name="checkbox[]" id="mycheck-ID" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-ID"> <label class="container2">II-A <input type="checkbox" value="IIA" name="checkbox[]" id="mycheck-IIA" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IIA"> <label class="container2">II-B <input type="checkbox" value="IIB" name="checkbox[]" id="mycheck-IIB" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IIB"> <label class="container2">II-C <input type="checkbox" value="IIC" name="checkbox[]" id="mycheck-IIC" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IIC"> <label class="container2">II-D <input type="checkbox" value="IID" name="checkbox[]" id="mycheck-IID" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IID"> <label class="container2">III-A <input type="checkbox" value="IIIA" name="checkbox[]" id="mycheck-IIIA" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IIIA"> <label class="container2">III-B <input type="checkbox" value="IIIB" name="checkbox[]" id="mycheck-IIIB" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IIIB"> <label class="container2">III-C <input type="checkbox" value="IIIC" name="checkbox[]" id="mycheck-IIIC" onclick="myFunction(event)"> <span class="checkmark"></span> </label> <input type="text" name="dep[]" id="field-IIIC"> </body> </html>
解决方案2
1 2020-09-11 13:16:38
你的 JS 代码看起来只有一个复选框/字段，因为 document.getElementByID 只返回 1 个元素（第一个）
因此，您应该使用 HTML 类而不是 ID，因为 ID 被设计为唯一的。
当你用类替换它们时，你可以使用document.getElementByClassName()它将返回一个数组 if items，然后你可以使用某种循环来循环遍历数组中的所有元素并执行 == true 检查
您的 JS 代码将如下所示：
function myFunction(){
const checkBoxes=document.getElementsByClassName("mycheck");
const fields= document.getElementsByClassName("field");
checkBoxes.forEach((box, index) => {
const field = fields[index];
if(box.checked== true) {
field.style.display="inline";
} else {
field.style.display="none";
}
});
}
我还修复了你的缩进，并将你的 var 替换为 const 你永远不应该使用 vars，它是一个旧的 js 功能，而是使用 let/const
Let 与 var 相同，但它会在您重新定义不应该这样做的变量时警告您，这可以防止您意外地创建 2 个具有相同名称的变量
所以你应该这样做：
let name = "hay"; // definition
name = "hey" // re assign
这将给出一个错误：
let name = "hay"; // definition
let name = "hey"; // re-definition (illegal with let)
另一方面，Const 是一个 JS 特性，它允许您定义一个不能重新定义或重新分配的变量。 这应该用于甚至不会被设置为新值的变量，比如你的元素数组
我还使用了一个 .forEach 循环，这是在 Javascript 中循环槽数组的一种非常方便的方法
解决方案3
1 2020-09-11 13:42:43
document.querySelectorAll(".mycheck").forEach(function (el) { el.addEventListener('click', function (e) { e.preventDefault(); if (e.target.parentElement.nextElementSibling.classList.contains('field')) { e.target.parentElement.nextElementSibling.classList.remove('field'); } else { e.target.parentElement.nextElementSibling.classList.add('field'); } }) }); .field{ display: none; } <label class="container2">IA <input type="checkbox" value="IA" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">IB <input type="checkbox" value="IB" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">IC <input type="checkbox" value="IC" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">ID <input type="checkbox" value="ID" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">II-A <input type="checkbox" value="IIA" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">II-B <input type="checkbox" value="IIB" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">II-C <input type="checkbox" value="IIC" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">II-D <input type="checkbox" value="IID" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">III-A <input type="checkbox" value="IIIA" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">III-B <input type="checkbox" value="IIIB" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field"> <label class="container2">III-C <input type="checkbox" value="IIIC" name="checkbox[]" class="mycheck" > <span class="checkmark"></span> </label> <input type="text" name="dep[]" class="field">解决方案4
0 2020-09-11 13:17:20
function myFunction() {
var checkBox = document.getElemenstByClassName("mycheck");
var field = document.getElemensByClassName("field");
checkBox.forEach((el, index) => {
if (el.checked == true) {
field[index].style.display = "inline";
}
else {
field[index].style.display = "none";
}
})
}
解决方案5
0 2020-09-11 13:17:40
将id="mycheck"替换为class="mycheck"并删除此 ID。 您可以使用类选择器".mycheck"访问所有复选框。 如果您的 ID 不是唯一的，您的代码将仅对找到的第一个有效。
解决方案6
0 2020-09-11 13:17:45
没有两个元素可以具有相同的 ID。 所以，我认为你应该改变 ids 并遍历所有这些。 或者你使用一个类并使用document.getElementsByClassName("name_of_class");
但是使用类会更可靠和有效。
解决方案7
0 2020-09-11 13:27:36
由于您对多个控件使用相同的ID 。文档的ID必须是唯一的。 使用类名。
在反应 js 中使用 onChange 时我没有收到合成事件
[英]I am not getting synthetic event while using in onChange in react js
在使用bitcoinjs-lib时，我得到的是getAddress（）不起作用
[英]While using bitcoinjs-lib I am getting getAddress() is not fuction
我在 React Hooks 中使用过滤器时遇到问题，我该如何解决这个问题？
[英]I am having problem while using filter in react Hooks,how can i solve this issue?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.