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

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
– Matt, Commented Feb 21, 2020 at 2:29

Nguyễn Văn Phong · Accepted Answer · 2020-02-21 04:00:04Z

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

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?
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.

Zain · Accepted Answer · 2020-02-21 03:42:07Z

$("#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' />

Premlatha · Accepted Answer · 2020-02-21 04:28:53Z

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

For some reason, this only says "unchecked" whether it's checked or not.

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

1 Comment

Linked

Hot Network Questions