Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks

How to check jQuery checkbox checked or not ?

Aman Jain, January 25, 2022January 25, 2022

In this article i will show you multiple way to check or validate if a checkbox is checked or not. Also i will show you to check a checkbox programmatically. In the post we will learn all possibilities to validate a checkbox and how we can check a checkbox using jQuery.

There is multiple way to check weather a checkbox is checked or not , so here are the example of jQuery checkbox checked

Using jQuery attr() function, attr() function is used to get the attribute of any element. it accepts two parameters first is name of attribute and other one is value of attribute.

If we pass only first parameter then it will return the value of attribute and both parameters are passed then it will set the attribute value.

$(element).attr('checked');  // will return string checked or null

Using jQuery prop() function

$(element).prop('checked');  // will return boolean true / false

Using jQuery is() function

$(element).is(':checked');  // will return boolean true / false

Let’s take an example of jQuery checkbox checked

Example 1 : check jQuery checkbox checked or not


In this example i will use simple checkbox and html to show their value as below

<input type="checkbox" id="isSelected" checked />
<div>Prop value : <span id="output-prop"></span></div>
<div>Attr value : <span id="output-attr"></span></div>
<div>Is value : <span id="output-is"></span></div>

<button id="mark-checked">Set Checked</button>


Here we used a checkbox with id isSelected and also the output dick to show the values and then JavaScript

<script>
  $(function () {
    $('#isSelected').click(function () {
      $('#output-prop').html($(this).prop('checked'));
      $('#output-attr').html($(this).attr('checked'));
      $('#output-is').html($(this).is(':checked'));
    });

    $('#isSelected').change(function () {
      
      $('#output-prop').html($(this).prop('checked'));
      $('#output-attr').html($(this).attr('checked'));
      $('#output-is').html($(this).is(':checked'));
    });

    $('#mark-checked').click(function () {
      var isChecked = $('#isSelected').prop('checked');
      $('#isSelected').prop('checked', !isChecked);
      $('#isSelected').trigger('change');
    });
  });
</script>

Here we registered 3 methods one for on click of checkbox, second on change of checkbox and third to check the checkbox programatically.

Live Preview :

How to check checkbox programmatically?

In the above example if you see we have registered a button and the click event on the button the programmatically check or uncheck the box. so create a button


<button id="mark-checked">Set Checked</button>

and then register click event to set the value of checkbox

$('#mark-checked').click(function () {
      var isChecked = $('#isSelected').prop('checked');
      $('#isSelected').prop('checked', !isChecked);
      $('#isSelected').trigger('change');
    });

Also Read : How to get radio input value in jQuery ?

Related

HTML Javascript jQuery checkboxHTMLjquery

Post navigation

Previous post
Next post

Related Posts

Javascript Remove hash from url in Angular

Remove hash from URL in angular 12 and deploy to server

February 1, 2022

From the first install angular come with hash URL routing and it’s defined in app-routing.module.ts. To remove hash from URL we need to change useHash key to false. Angular runs it development application ng server and whenever we wanted to deploy the application we need a server like Apache or…

Read More
Javascript ngFor and For loop over object or Array in angular

ngFor and For loop over object or Array in angular

March 30, 2022October 4, 2022

Loops are used to iterate through objects or array, In angular we can use ngFor and For loop over array or object in angular, ngFor is a template structural directive which is used to iterate a loop in template file whereas for and each is used to iterate the loop…

Read More
Javascript Multiple Ways To Convert Html To Pdf In Angular

Multiple Ways to Convert Html to PDF in Angular ?

April 22, 2022November 5, 2023

There is multiple ways to convert HTML to PDF in angular, some are native and some are using the packages. While creating web application we need to manage to create PDF from the same html so in this tutorial i will show you multiple ways to create html to PDF….

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • The Resilience of Nature: How Forests Recover After Fires
  • Understanding Laravel Cookie Consent for GDPR Compliance
  • Understanding High Vulnerabilities: A Critical Overview of the Week of May 12, 2025
  • Installing a LAMP Stack on Ubuntu: A Comprehensive Guide
  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version