How To Get Checked And Unchecked Checkbox Value In jQuery
Checkbox manipulation is an important part of web development, and jQuery makes it easier than ever to work with these tiny but powerful UI elements. Whether you're building a dynamic form or enhancing user interactions, your skills of retrieving both checked and unchecked checkbox values is a valuable skill.
In this blog, we'll dive into the world of checkboxes and see various techniques to extract the checkboxes. From selecting specific checkboxes to validating user inputs, we've covered it all. Get ready to level up your web development game with this essential jQuery knowledge.
$('.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>
Understanding the methods of retrieving checked and unchecked checkbox values in jQuery is a fundamental skill for web developers. We've gone through some popular methods that provide powerful tools to interact with checkboxes in your web applications. Whether you're enhancing form validation, creating dynamic user interfaces, or building feature-rich web apps, learning these techniques is essential.
With the capabilities of jQuery, you can streamline your coding process and offer users a more seamless experience. As you continue to evolve your skills and knowledge, it will help you create interactive and user-centric web solutions.
You might also like:
- Read Also: How To Toggle Dark And Light Mode Using jQuery
- Read Also: How To Check Password Strength Using JQuery
- Read Also: How To Get Multiple Checkbox Value In jQuery
- Read Also: Jquery Input Mask Phone Number Validation
