Here we will see the Javascript jquery checkbox checked and unchecked and ischecked examples.
Input type checkbox
How to create input checkbox in HTML..
for this, we have to use the input type checkbox. along with type we used other attributes line name value and id.
1 | <input type="checkbox" name="hobby" value="music" id="ck1"> Music |
Jquery checkbox checked
To select check boxes $("#ck1").prop("checked",true); is used.
Here #ck1 is the id of the text box.
using prop() we set the checkbox checked property to true.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#ck1").prop("checked",true); $("#ck2").prop("checked",true); $("#ck5").prop("checked",true); $("#ck6").prop("checked",true); }); </script> </head> <body> <h2>Chech Box check example</h2> <input type="checkbox" name="hobby" value="music" id="ck1"/> Music <br/> <input type="checkbox" name="hobby" value="painting" id="ck2"/> Painting <br/> <input type="checkbox" name="hobby" value="singing" id="ck3"/> Singing <br/> <input type="checkbox" name="hobby" value="dancing" id="ck4"/> Dancing <br/> <input type="checkbox" name="hobby" value="driving" id="ck5"/> Driving <br/> <input type="checkbox" name="hobby" value="gardning" id="ck6"/> Gardning <br/> </body> </html> |
checkbox prop checked removed jquery example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $( "#check" ).click(function() { $('#agree').prop("checked",true); }); $( "#uncheck" ).click(function() { $('#agree').prop("checked",false); }); }); </script> </head> <body> <h2>Chech Box check uncheck example</h2> <input type="checkbox" name="terms" value="agree" id="agree"/> Agree with terms and conditions <br/> <hr/> <input type="button" value="Agree" id="check"/> <input type="button" value="Disagree" id="uncheck"/> </body> </html> |
Jquery check uncheck all checkboxs on button click
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 | <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#ck1").prop("checked",true); $("#ck2").prop("checked",true); $("#ck6").prop("checked",true); $( "#ckall" ).click(function() { $('input:checkbox').prop("checked",true); }); $( "#unckall" ).click(function() { $('input:checkbox').prop("checked",false); }); }); </script> </head> <body> <h2>Chech Box check example</h2> <input type="checkbox" name="hobby" value="music" id="ck1"/> Music <br/> <input type="checkbox" name="hobby" value="painting" id="ck2"/> Painting <br/> <input type="checkbox" name="hobby" value="singing" id="ck3"/> Singing <br/> <input type="checkbox" name="hobby" value="dancing" id="ck4"/> Dancing <br/> <input type="checkbox" name="hobby" value="driving" id="ck5"/> Driving <br/> <input type="checkbox" name="hobby" value="gardning" id="ck6"/> Gardning <br/> <hr/> <input type="button" value="Check All" id="ckall"/> <input type="button" value="Uncheck All" id="unckall"/> </body> </html> |
jquery get checkbox value
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 | <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $( "#getvalues" ).click(function() { $("#result").text(); var values=[] $('input[name="hobby"]:checked').each(function(){ values.push(this.value); }); $("#result").text(values); }); }); </script> </head> <body> <h2>Chech Box check example</h2> <input type="checkbox" name="hobby" value="music" id="ck1"/> Music <br/> <input type="checkbox" name="hobby" value="painting" id="ck2"/> Painting <br/> <input type="checkbox" name="hobby" value="singing" id="ck3"/> Singing <br/> <input type="checkbox" name="hobby" value="dancing" id="ck4"/> Dancing <br/> <input type="checkbox" name="hobby" value="driving" id="ck5"/> Driving <br/> <input type="checkbox" name="hobby" value="gardning" id="ck6"/> Gardning <br/> <hr/> <input type="button" value="Get Values" id="getvalues"/> <p id="result"></p> </body> </html> |
Read More