jQuery get checkbox checked value; Through this tutorial, i am going to show you how to get checked checkbox value by id, name, class using jQuery.
jQuery Get Checkbox Checked Value
Using the jQuery val() method, you can get the checked checkbox value in jQuery from html elements by checkbox name, id and class etc.
Example 1 – jQuery Get Checkbox Checked Value By id
See the following example with demo to get checked checkbox value in jQuery from html elements using jQuery val() method:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>To get checked checkbox value in jqUERY</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style type="text/css"> .container{ padding: 15px; background: #28BAA2; border: 1px solid #bead18; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".btn_check").click(function(){ var abc = 'please check a checkbox'; if ($('#checkVal').is(":checked")){ abc = $("#checkVal").val(); } alert(abc); }); }); </script> </head> <body> <div class="container"> <p><b>Note:</b> Click on button To get checked checkbox value in jQuery</p> <p><input type="checkbox" id="checkVal" value="yes i am">Are you developer ?</p> <button type="button" class="btn_check">Checked</button> </div> </body> </html>
Demo 1 – jQuery Get Checkbox Checked Value By id
Note: Click on button To get checked checkbox value in jQuery
Are you developer ?
Example 2 – jQuery Get Checkbox Checked Value By Name
See the following example with demo to get checked checkbox value in jQuery from html elements using jQuery val() method:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>To get checked checkbox value in jqUERY</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style type="text/css"> .container{ padding: 15px; background: #28BAA2; border: 1px solid #bead18; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".btn_check1").click(function(){ var abc = 'please check a checkbox'; if ($("input[name='checkVal']").is(":checked")){ abc = $("input[name='checkVal']").val(); } alert(abc); }); }); </script> </head> <body> <div class="container"> <p><b>Note:</b> Click on button To get checked checkbox value in jQuery</p> <p><input type="checkbox" name="checkVal" value="yes i am">Are you developer ?</p> <button type="button" class="btn_check1">Checked</button> </div> </body> </html>
Demo 2 – jQuery Get Checkbox Checked Value By Name
Note: Click on button To get checked checkbox value in jQuery
Are you developer ?
Recommended jQuery Tutorials
Recommended:-Fade Out Animation jQuery
Recommended:-jQuery FadeToggle Animation Example
Recommended:-jQuery FadeTo Animation Example
Recommended:-jQuery slideDown() Animation Example
Recommended:-jQuery SlideUp() Animation Example
Recommended:-jQuery SlideToggle Animation Effect Example
Recommended:-jQuery Replace HTML Content in Element
Recommended:-jQuery Replace Text in Div,Span, p, Textarea
Recommended:-jQuery Get and Set Input box By Name, Id
Recommended:-Get and Set CSS Property in jQuery
Recommended:-jQuery Insert Content Before or After an Element
Recommended:-jQuery HTML Append Prepend Example
Recommended:-jQuery Remove Text & Element From HTML
Recommended:-jQuery Add Remove Class on onClick