How do I determine if a checkbox is checked to do something, then unchecked do something else?

Question

I have a PHP array that populates the IDs of checkboxes in a form, then used jQuery to capture those IDs. Now I am having a hard time writing an If/Else statement to determine if the checkbox is checked, and if so do one thing, and if it's unchecked do something else. This code works outside of the If statement, but as soon as I add any of the different methods to determine if it's checked or not, it stops working.

The different methods I have used are: .click, .is(':checked'), .prop, and (this.checked) but nothing works.

This (and .change) works:

$('#' + product_array[i]).click(function(){

     alert(product_array[i]);

});

This (and all of the other methods mentioned above) does not:

$('#' + product_array[i]).click(function(){

    if(this.checked){
        alert('checked');
    }
    else {
        alert('unchecked');
    }
});

I just tried that and that works, kinda, but backwards. When I check the box, the "else" statement is triggered. When I take away the else statement, it doesn't work. — Matt, Feb 21 '20 at 02:29

Nguyễn Văn Phong · Answer 1 · 2020-02-21T04:00:04.650

2

Solution 1

$("input[type='checkbox']").on("change", function(){
   if($(this).prop('checked'))
    console.log("Checked");
   else
    console.log("UnCheck"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />

Solution 2

You can use the class to listen to your checkbox change event like below.

$(".myCheckBox").on("change", function(){
   if($(this).prop('checked'))
    console.log("Id: " + $(this).attr("id") + " Checked");
   else
    console.log("Id: " + $(this).attr("id") + " UnChecked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="myCheckBox" type="checkbox" id="1" />
<input class="myCheckBox" type="checkbox" id="2" />
<input class="myCheckBox" type="checkbox" id="3"/>

edited Feb 21 '20 at 04:00

answered Feb 21 '20 at 02:20

Nguyễn Văn Phong

13,506
17
39
56

Since I am populating the IDs from a PHP array, how do I populate both the class and the id with a jquery array that I can use for this? – Matt Feb 21 '20 at 04:29
add your class in each `input` item. – Nguyễn Văn Phong Feb 21 '20 at 04:30
On your first solution, it works, except how do I change: $("input[type='checkbox'"].on('change', function....... to being able to use: $("#" + product_array)...... ? When I tried it, only the "else" statement works and only "Uncheck" comes out. – Matt Feb 21 '20 at 21:09
Give me your HTML, **product_array** as well. Please. – Nguyễn Văn Phong Feb 22 '20 at 01:49

Premlatha · Answer 2 · 2020-02-21T04:28:53.980

0

Checked attribute is a boolean attribute. So, this.checked will output either true or false. true-checked and false-unchecked.

//$("input[type='checkbox']").click(function(){
$("#one").click(function(){
   if(this.checked==true)
   {
    console.log("Checked");
    }
   else
   {
    console.log("UnCheck"); 
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="one" />

edited Feb 21 '20 at 04:28

answered Feb 21 '20 at 02:40

Premlatha

1,676
2
20
40

For some reason, this only says "unchecked" whether it's checked or not. – Matt Feb 21 '20 at 04:19

score 0 · Answer 3 · answered Feb 21 '20 at 03:42

$("#checkb").change(function(){
$res=$(this).prop('checked')?'do something on check':'do on unchecked'
  console.log($res);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Check: <input type="checkbox" id='checkb' />

How do I determine if a checkbox is checked to do something, then unchecked do something else?

3 Answers3