How to check & uncheck a checkbox with jQuery
Today, We will let you know how to check & uncheck a checkbox with jQuery in this article. I see many peoples are confused about How to Check a Checkbox is Checked or Not using jquery. so I have created this article and share in our website. there is a three-way to check which checkbox is checked.
The three ways are as follows with an example.
checkbox name wise checked value
1 2 3 4 5 6 7 8 9 10 | $('input[name="chk1"]').click(function(){ //checked var chk_color = $(this).val(); var check = $(this).prop("checked"); if(check) { alert(chk_color+" Checkbox is checked."); } else { alert(chk_color+" Checkbox is unchecked."); } }); |
checkbox class name wise checkbox checked value
1 2 3 4 5 6 7 8 9 10 | $('.chk2').click(function(){ //checked var chk_color = $(this).val(); var check = $(this).prop("checked"); if(check) { alert(chk_color+" Checkbox is checked."); } else { alert(chk_color+" Checkbox is unchecked."); } }); |
function name wise checkbox checked value
1 2 3 4 5 6 7 8 9 | function funchk3(value) { var check = $('.chk3').prop("checked"); if(check) { alert(value+" Checkbox is checked."); } else { alert(value+" Checkbox is unchecked."); } } |
Now, you can see our full example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <html> <head> <title>How do i know currently which checkbox is check</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ //checkbox name wise checked $('input[name="chk1"]').click(function(){ //checked var chk_color = $(this).val(); var check = $(this).prop("checked"); if(check) { alert(chk_color+" Checkbox is checked."); } else { alert(chk_color+" Checkbox is unchecked."); } }); // checkbox class name wise checkbox checked $('.chk2').click(function(){ //checked var chk_color = $(this).val(); var check = $(this).prop("checked"); if(check) { alert(chk_color+" Checkbox is checked."); } else { alert(chk_color+" Checkbox is unchecked."); } }); }); // function name wise checkbox checked function funchk3(value) { var check = $('.chk3').prop("checked"); if(check) { alert(value+" Checkbox is checked."); } else { alert(value+" Checkbox is unchecked."); } } </script> </head> <body> <div class="container"> <h4 class="alert alert-success"><b>First Way:</b> "$('input[name="chk1"]')" checkbox Name wise check which checkbox is checked</h4> <input type="checkbox" name="chk1" id="chk1red" class="chk1" value="Red" /> <label for="chk1red">Red</label><br> <input type="checkbox" name="chk1" id="chk1yellow" class="chk1" value="Yellow" /> <label for="chk1yellow">Yellow</label> <br> <input type="checkbox" name="chk1" id="chk1black" class="chk1" value="Black" /> <label for="chk1black">Black</label><br> <input type="checkbox" name="chk1" id="chk1white" class="chk1" value="White" /> <label for="chk1white">White</label> <h4 class="alert alert-warning"><b>Second Way:</b> "$('.chk2')" checkbox Class name wise check which checkbox is checked</h4> <input type="checkbox" name="chk2" id="chk2red" class="chk2" value="Red" /> <label for="chk2red">Red</label> <br> <input type="checkbox" name="chk2" id="chk2yellow" class="chk2" value="Yellow" /> <label for="chk2yellow">Yellow</label> <br> <input type="checkbox" name="chk2" id="chk2black" class="chk2" value="Black" /> <label for="chk2black">Black</label><br> <input type="checkbox" name="chk2" id="chk2white" class="chk2" value="White" /> <label for="chk2white">White</label> <h4 class="alert alert-info"><b>Third Way:</b> "funchk3(this.value)" on click function name wise check which checkbox is checked</h4> <input type="checkbox" name="chk3" id="chk3red" class="chk3" value="Red" onclick="funchk3(this.value)" /> <label for="chk3red">Red</label> <br> <input type="checkbox" name="chk3" id="chk3yellow" class="chk3" value="Yellow" onclick="funchk3(this.value)" /> <label for="chk3yellow">Yellow</label> <br> <input type="checkbox" name="chk3" id="chk3black" class="chk3" value="Black" onclick="funchk3(this.value)" /> <label for="chk3black">Black</label><br> <input type="checkbox" name="chk3" id="chk3white" class="chk3" value="White" onclick="funchk3(this.value)"/> <label for="chk3white">White</label> </div> </body> </html> |