Show button when at lease 1 checkbox in a list checkboxes is checked

Question

I have some code that works fine; it displays a button when a checkbox is checked. But now I want to change something and in that case there will be more checkboxes (they are generated by the content of a database so the number is not clear now).

But the solution is based on the ID of an element and having multiple the same ID's is not valid ánd it does not work.

I have the code here: https://codepen.io/anon/pen/jKOLew?editors=1111 . As you can see only the first checkbox enables the div, the second doesn't.

Can somebody tell me how to solve this?

The code is this:

html:

<input type="checkbox" id="chkMessage" />Do you have Passport?<input type="checkbox" id="chkMessage" />Do you have Passport? <div id="dvMessage" style="display: none">Passport Number: <input type="text" /></div>`

And javascript:

`$(function() {  $("#chkMessage").click(function() {    if $(this).is(":checked")) {      $("#dvMessage").show();      $("#AddMessage").hide();    } else {      $("#dvMessage").hide();      $("#AddMessage").show();    }  });});`

Answer 1

You use the same id twice. An id is suppose to be unique.

Here I changed it to be a class, and now it works just fine

 $(function() { $(".chkMessage").click(function() { if ($(this).is(":checked")) { $("#dvMessage").show(); $("#AddMessage").hide(); } else { $("#dvMessage").hide(); $("#AddMessage").show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="chkMessage" />Do you have Passport? <input type="checkbox" class="chkMessage" />Do you have Passport? <div id="dvMessage" style="display: none"> Passport Number: <input type="text" /> </div> 

---

Additionally, if you want to make sure the button is shown when either checkbox is selected, you could do something like this

 $(function() { $(".chkMessage").click(function() { $("#dvMessage").hide(); $("#AddMessage").show(); $(".chkMessage").each(function() { if ($(this).is(":checked")) { $("#dvMessage").show(); $("#AddMessage").hide(); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" class="chkMessage" />Do you have Passport? <input type="checkbox" class="chkMessage" />Do you have Passport? <div id="dvMessage" style="display: none"> Passport Number: <input type="text" /> </div> 

---

If you by any chance can't control the rendered HTML, you can use the attribute selector [attribute="value"] to grab elements with the same id

 $(function() { $("[id='chkMessage']").click(function() { $("#dvMessage").hide(); $("#AddMessage").show(); $("[id='chkMessage']").each(function() { if ($(this).is(":checked")) { $("#dvMessage").show(); $("#AddMessage").hide(); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="chkMessage" />Do you have Passport? <input type="checkbox" id="chkMessage" />Do you have Passport? <div id="dvMessage" style="display: none"> Passport Number: <input type="text" /> </div>