gpt4 book ai didi

javascript - 我在使用复选框时遇到问题

转载 作者:行者123 更新时间:2023-12-01 15:37:02 24 4
gpt4 key购买 nike

(我是 javascript 的初学者)我在一个表单中有 11 个复选框以及每个复选框旁边的 11 个文本框/文本字段,显示:无(文本字段)在 CSS 中。
我正在尝试显示特定的文本字段 当用户点击 相应的复选框 使用 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";
}
}

最佳答案

@Abhishek,您的问题可能有很多解决方案。我写了一个简单的解决方案,适用于您的决定。请检查我所做的以下编辑。

  • myFunction - 您可以收到event作为参数。
  • event.target - 这是您选中/未选中的复选框。
  • checkBox.value - 这是你写的值(例如 - <input type="checkbox" value="IA" )
  • 'field-' + checkBox.value - 这会让你选择id的输入字段。 (例如 - field-IA)
  • 运行以下代码段后,所有内容都可能与您想要的相同。

  • ** 还需要提一件事:请不要使用相同的 id对于每个元素。您可以将 ID 命名为 field-for-somethingmycheck-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">I-A
    <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">I-B
    <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">I-C
    <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">I-D
    <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>

    关于javascript - 我在使用复选框时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63847772/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com