checkbox not working with multiple checkbox onclick

Question

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>

I want both check boxes to work after clicking one by one on it. The result I get: only checkbox 1 is working, the other is not working.

Mosrainis · Accepted Answer · 2019-11-09 12:36:01Z

3

id attribute has to be unique so in this case getElementById only selects the first element. you can change the id attribute to class and then select your checkboxes and paragraphs with 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>

Now the JavaScript part need to recognize the checkboxes. We should add a FOR loop to select the checkbox[i] and the paragraph below it.

for (var i=0;i<checkBox.length; i++) {
    if (checkBox[i].checked == true){
    text[i].style.display = "block";
  } else {
    text[i].style.display = "none";
  }
}

See the Demo here

edited Nov 9, 2019 at 12:36

answered Nov 9, 2019 at 10:51

Mosrainis

5006 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pushprajsinh Chudasama · Accepted Answer · 2019-11-09 10:45:38Z

2

Give different Id .It will works.

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

function myFunction1(){
  var checkBox = document.getElementById("myCheck1");
  var text1 = document.getElementById("text1");
  if (checkBox.checked == true){
    text1.style.display = "block";
  } else {
    text1.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="myCheck1" onclick="myFunction1()">

<p id="text1" style="display:none">Checkbox 2 is CHECKED!</p>

answered Nov 9, 2019 at 10:45

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

2 Comments

Pushprajsinh Chudasama Over a year ago

If it is work for you then please up-vote and accept the answer.

BruTe Over a year ago

unable to upvote --> thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score.

Collectives™ on Stack Overflow

checkbox not working with multiple checkbox onclick

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related