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>
	<title>How To Get Checked And Unchecked Checkbox Value In jQuery - Techsolutionstuff</title>
	<script src=""></script>
<h2>check and uncheck checkbox using javascript -</h1>
        <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">
<div class="checked_value"></div>
<script type="text/javascript">	
		var phpval = $('.php').val();
		var reactval = $('.react').val();        
		$('.checked_value').text(phpval+' & '+reactval );


Example 2:

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

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>How To Get Checked And Unchecked Checkbox Value In jQuery - Techsolutionstuff</title>
  p {
    margin: 20px 0 0;
  b {
    color: blue;
  <script src=""></script>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
$( "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>" + $ ":checked" ) + "</b>" );



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:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.