Working With jQuery Radio And Checkbox Button

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.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now