DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

How To Get Checked And Unchecked Checkbox Value In jQuery

In this article, we will see how to get checked and unchecked checkbox values in jquery.

Here, we will learn to get checked and unchecked values using javascript. Also, you can have multiple checkboxes checked and unchecked using a jquery event.

We will use prop() and attr() jquery selectors. The prop() selector is used to get the value of a property of elements. It returns undefined the value of a property that has not been set. The attr() is to get the value of the attributes.

So, let's see jquery get checked and unchecked checkbox value, check and uncheck checkbox using javascript.

$('.checkbox').prop('checked', true);

$('.checkbox').attr('checked', true);
Enter fullscreen mode Exit fullscreen mode

Example 1:

In this example, we will get a checkbox value when clicking on the submit button.

<!DOCTYPE html>
<html>
<head>
    <title>How To Get Checked And Unchecked Checkbox Value In jQuery - Techsolutionstuff</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>check and uncheck checkbox using javascript -</h1>
<form>
        <h3>Select languages:</h3>
        <label><input type="checkbox" class="laravel"  value="laravel" name="language"> Laravel </label>        
        <label><input type="checkbox" class="php"  value="php" name="language"> PHP </label>        
        <label><input type="checkbox" class="jquery"  value="jquery" name="language"> jQuery </label>
        <label><input type="checkbox" class="javascript"  value="javascript" name="language"> JavaScript </label>
        <label><input type="checkbox" class="react"  value="react" name="language"> React </label>
        <label><input type="checkbox" class="angular"  value="angular" name="language"> Angular </label>
        <label><input type="checkbox" class="python"  value="python" name="language"> Python </label>    
        <input type="button" id="submit" name="submit" value="submit">
    </form>
<div class="checked_value"></div>
<script type="text/javascript"> 
    $('#submit').click(function(){    
        var phpval = $('.php').val();
        var reactval = $('.react').val();        
        $('.checked_value').text(phpval+' & '+reactval );
    });
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Example 2:

In this example, we will use the prop() and attr() functions.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How To Get Checked And Unchecked Checkbox Value In jQuery - Techsolutionstuff</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You might also like:

Top comments (0)