jQuery Get Checkbox Checked Value

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


To get checked checkbox value in jqUERY

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



To get checked checkbox value in jqUERY

Note: Click on button To get checked checkbox value in jQuery

Are you developer ?


Recommended jQuery Tutorials

Leave a Comment