When checkbox is clicked, how to know the state of the checkboxes

Question

EDIT: Please read the end part of the post, I know the part that tells which are unchecked needs to be inside the block of code, the issue here is that the first part of the code is not registering the "click". So can't do anything without that.

E2: May take the suggestion of adding a onclick to the boxes, since the code for boxes is generated with JS, I would add it once and all of them will get the function call, but that feels kinda ugly

I have a set of check boxes, and when one is clicked I need to return the values of the unchecked ones. HTML:

<div id="myCheckboxList">
<input type="checkbox" name="myList" value="1" checked>1
<input type="checkbox" name="myList" value="2" checked>2
<input type="checkbox" name="myList" value="3" checked>3
</div>

JavaScript:

$(function(){
  $("input[name=myList]").on("click",function(){
    console.log("triggered");
    //code here to find which ones are unchecked

  });
});

I have tried to also add this in the code

$boxes = $('input[name=myList]:not(:checked)');
$boxes.each(function(){
    // Do stuff with for each unchecked box
});

Unfortunatly the "triggered" in not getting output to console, so unsure why it is so, and how would i get an event to happen when the checkboxes are hit

Answer 1

Easiest way would be to:

let v = $(this).attr('value');
if(v === 1){ // box 1 selected

Adding this inside your 'click' handler should work.

Answer 2

Try like this:

 $(function(){ $("input[name=myList]").on("click",function(){ var uncheck=[]; //console.log("triggered"); //code here to find which ones are unchecked $boxes = $("input[name=myList]:not(:checked)"); $boxes.each(function(){ // Do stuff with for each unchecked box uncheck.push($(this).attr('value')) console.log(uncheck); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="myCheckboxList"> <input type="checkbox" name="myList" value="1" checked>1 <input type="checkbox" name="myList" value="2" checked>2 <input type="checkbox" name="myList" value="3" checked>3 </div> 

Answer 3

You need to add your each script inside your click event.

 $(function(){ $("input[name=myList]").on("click",function(){ $("input[name=myList]:not(:checked)").each(function() { console.log($(this).val()); }); }); }); 

 <div id="myCheckboxList"> <input type="checkbox" name="myList" value="1" checked>1 <input type="checkbox" name="myList" value="2" checked>2 <input type="checkbox" name="myList" value="3" checked>3 </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

I copied your code directly to a fiddle, and it works fine. You could be missing the jquery library?

EDIT:

Just to be sure, I updated the snippet to generate the inputs, and it still works fine.

 $(function() { var html = '<input type="checkbox" name="myList" value="1" checked>1' +'<input type="checkbox" name="myList" value="2" checked>2' +'<input type="checkbox" name="myList" value="3" checked>3'; $("#myCheckboxList").html(html); $("input[name=myList]").on("click", function() { console.log("triggered"); //code here to find which ones are unchecked $boxes = $('input[name=myList]:not(:checked)'); $boxes.each(function() { console.log($(this).val()); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myCheckboxList"> </div> 

Answer 5

Another solution is to add an "onclick" method in your html. This will call a javascript function whenever the checkbox is clicked. That function can contain any logic for your checkboxes.

<input type="checkbox" name="myList" value="1" checked onclick="checkboxChangeEvent();">1

Then you can implement your javascript function to return a list of unchecked boxes or find the input boxes by name and return the alert as in previous answers.

function checkboxChangeEvent(){
    $boxes = $('input[name=myList]:not(:checked)');
    $boxes.each(function() {
      alert($(this).val());
    });
}