I am getting a problem while using checkboxes

Question

(i am a beginner in javascript)I have 11 checkboxes in a form along with 11 text boxes/text fields beside each checkbox with display:none(text fields) in css. I am trying to display particular text field when user clicks on the respective checkbox using javascript but it is not showing for all checkboxes it is working only for first checkbox. here is my html code:

<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">

this is my 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";
          }
      }

Answer 1

@Abhishek, there could be lots of solutions to your question. I wrote a simple solution which works for your decision. Please check the following edits I made.

1. myFunction - you can receive event as a parameter.
2. event.target - this is the checkbox you checked/unchecked.
3. checkBox.value - this is the value you wrote (eg - <input type="checkbox" value="IA" )
4. 'field-' + checkBox.value - this will let you select id of input field. (eg - field-IA )
5. All could be the same as you wanted after you run the following snippet.

** Just one more thing needs to mention: Please don't use the same id for each element. You can name the ids like field-for-something or 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>

Answer 2

Your JS code looks like there is only one checkbox/field, scince document.getElementByID only returns 1 element (the first one)

So instead you should work with HTML Classes and not with ID's, scince ID's are designed to be unique.

When you replace them all with classes you can use document.getElementByClassName() which will return an array if items, then you can use some sort of loop to loop trough all the elements in the array and preform the == true check

Your JS Code will look like this:

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";
        }
    });
}

I also fixed you indentation, and replace your var's with const's you should never EVER use vars, its an old js feature, instead use let/const

Let is the same as var except it warns you when you re-define your variable which you should not do, this prevents you from accidentally making 2 variables with the same name

So you should do:

let name = "hay"; // definition
name = "hey" // re assign

And this will give an error:

let name = "hay"; // definition
let name = "hey"; // re-definition (illegal with let)

Const on the other hand is a JS feature that lets you define a variable that cant be re-defined nor re-assigned. this should be used for variables that wont even be set to a new value, like your element arrays

I also used a .forEach loop which is a very convenient way to loop trough arrays in Javascript

Answer 3

 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">

Answer 4

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";
    }
  })
  }

Answer 5

Replace id="mycheck" by class="mycheck" and remove this IDs. You can access all checkboxes with the class selector ".mycheck" . If your ID is not unique your code is going to work only for the first one found.

Answer 6

No two elements can have the same ids. So, I think you should change the ids and loop through all of them. Or you use a class and use document.getElementsByClassName("name_of_class");

But using a class would be more reliable and efficient.

Answer 7

As you are using the same IDs for multiple controls.ID must be unique for a document. Use the class name.