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);
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>
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>
You might also like:
Top comments (0)