In this blog, I am going to share all properties of checkbox and radio button. We will change the attribute of both controls using jQuery.

Step 1

Create one web application.

Step 2

Add one web page to write the code.

Added web page
Figure:1 (Added web page)

Step 3

Write the below code to create checkbox, radio button, and a button control.

  1. <label id="firstCheckbox"> <input type="checkbox" id="chkIsPassed" />Books</label>
  2. <label id="firstRadioButton"><input type="radio" name="gender" id="rdoMale" />Male </label>
  3. <label id="secondRadioButton"><input type="radio" name="gender" id="rdoFemale" />Female </label>
  4. <input type="button" id="btnClick" value="Click Me" />
Layout of webpage
Figure:2 (Layout of webpage)

Step 4

By default, all radion and checkbox are unchecked. To make them checked, set the property checked to "checked".

  1. <label id="firstCheckbox"> <input type="checkbox" checked="checked" id="chkIsPassed" />Books</label>

Step 5

Add the following jQuery script inside the head section.

  1. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

Now, it is time to write the jQuery code to check and set the properties of controls. I am writing all jQuery code on the button click event.

How to check if a checkbox is checked or not on button click event -

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#btnClick").click(function() {
  4. var isChecked = $("#chkIsPassed").prop("checked") //returns bool value ,true if checkbox is checked otherwise false
  5. alert(isChecked);
  6. });
  7. });
  8. </script>

How to check if the radion button is checked or not -

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#btnClick").click(function() {
  4. var isChecked = $("#rdoMale").prop("checked") //returns bool value ,true if Male radion button is checkes otherwise false
  5. alert(isChecked);
  6. });
  7. });
  8. </script>

How to change the checkbox property from checked to unchecked on button click -

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#btnClick").click(function() {
  4. $("#chkIsPassed").prop("checked", false) //set checkbox property checked to false on button click
  5. });
  6. });
  7. </script>

How to change the radion button property from checked to unchecked on button click -

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#btnClick").click(function() {
  4. $("#rdoMale").prop("checked", false) //set checkbox property checked to false on button click
  5. });
  6. });
  7. </script>

How to find the checked value of a radion button -

I have added one function on radion button-click event.

  1. <label id="firstRadioButton"><input type="radio" name="gender" onclick="CallMe()" id="rdoMale" value="Male" />Male </label>
  2. <label id="secondRadioButton"><input type="radio" name="gender" onclick="CallMe()" id="rdoFemale" value="Female" />Female </label>

And, defined the function named as CallMe inside the script section.

  1. function CallMe() {
  2. if ($("#rdoMale").prop("checked")) {
  3. alert("Male clicked");
  4. }
  5. if ($("#rdoFemale").prop("checked")) {
  6. alert("Female clicked");
  7. }
  8. }

Remark

You can download the working application from this link.