How to handle radio button checked and unchecked events using JavaScript and jQuery

by

This tutorial explains the jquery radio button checked and unchecked event. We will discuss in detail how to handle radio button checked and unchecked events using jQuery and JavaScript.

Radio button checked and unchecked event using JavaScript

I am going to explain how to handle radio button checked and unchecked events using JavaScript.

This particular example, I have a few radio button options like below:

  1. LG
  2. Samsung
  3. Nokia
  4. Others

Here my requirement is whenever a user clicks on the “Others” radio button then one textbox should appear. For all other options, the textbox should not come.

So for that event, we have to write some code by using Html and JavaScript which is given below.

HTML Code for Radio button inputs Controls

Below is my HTML code to generate the form.

If you are using in SharePoint, then you can write the code inside a content editor web part or script editor web part,

<!DOCTYPE html>
<html>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Htmlpage/New js file.js"></script>
<body>
<h2>HTML Forms</h2>
Username:<br>
<input type="text" name="Username">
<br>
EmailID:<br>
<input type="text" name="EmailID">
<br>
Vendor:<br>
<input type="radio" name="vendor" value="0" onclick="handleClick(this);" > LG
<input type="radio" name="vendor" value="1" onclick="handleClick(this);" > Samsung
<input type="radio" name="vendor" value="2" onclick="handleClick(this);" > Nokia
<input type="radio" name="vendor" value="3" onclick="handleClick(this);" > Others <br>
<input type="text" name="text" id="txtComments" style="display: none;" >
<br><br>
<input type="submit" value="Submit">
</body>
</html>

For hiding the Textbox in other options, we have to write the code as “style=”display:none;” in the HTML file.

Here we put the “Onclick” option of radio button by using Html code and for calling the method from JavaScript, we are using “handleClick(this)” method in the JavaScript which is mentioned in below:

radio button checked event using javascript

Below is our JavaScript function, which will show or hide the textbox using JavaScript.

function handleClick(myRadio) {
var selectedValue = myRadio.value;
if(selectedValue=="3″)
{
document.getElementById("txtComments").style.display = ";
//Show textbox
}
else
{
document.getElementById("txtComments").style.display = 'none';
//Hide textbox.
}
}

Here, function handleClick(myRadio) is a method or function which can be used for calling the value. After that by using “If else” condition, we are showing or hiding the textbox by using JavaScript.

So that it can be helpful to hide the text for other options and to show for validity option. Similarly, “document.getElementById” method is used for retrieving the value from HTML.

Radio button checked and unchecked event using jQuery

Suppose we have an HTML form that has a number of radio button choices options as:

  1. LG
  2. Samsung
  3. Nokia
  4. Others

Here my requirement is whenever a user clicks on the Others option then one textbox control should appear. So for that radio button checked event, we have to write some code by using Html and JQuery which is given below.

jQuery radio button checked (HTML Code for Radio buttons)

Now we can write the HTML code for the radio button in an HTML file like below:

<!DOCTYPEhtml>
<html>
<scriptsrc=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<scriptsrc=”https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/Jsfile.js”></script>
<body>
<h2>HTML Forms</h2>
Username:<br>
<inputtype=”text”name=”Username”id=”usrtxt”>
<br>
EmailID:<br>
<inputtype=”text”name=”EmailID”id=”usrid”>
<br>
Vendor:<br>
<divid=”radbtn”>
<inputtype=”radio”name=”vendor”value=”0″id=”ven0″> LG
<inputtype=”radio”name=”vendor”value=”1″id=”ven1″> Samsung
<inputtype=”radio”name=”vendor”value=”2″id=”ven2″> Nokia
<inputtype=”radio”name=”vendor”value=”3″id=”ven3″>Others<br>
</div>
<inputtype=”text”name=”text”id=”txtComments”style=”display: none;”>
<br><br>
<inputtype=”submit”value=”Submit”id=”submitbtn”>
</body>
</html>

In this example, we created the radio button options whose named as “vendor” and each vendor is having their specific “id”. Here I have given vendor name is “LG” and their specific id name is “ven0”, for vendor “Samsung”, id is “ven1” and so on.

For hiding the Textbox in other options, we have to write the code as “style=”display: none;”in the HTML file and have to write the code in JQuery also which is given below.

jQuery radio button checked (JS Code)

Below is the jQuery code to handle radio button checked event.

$(document).ready(function () {
$("#submitbtn").click(function () {
radio();
});
$("#ven0").click(function () {
radio();
});
$("#ven1").click(function () {
radio();
});
$("#ven2").click(function () {
radio();
});
$("#ven3").click(function () {
radio();
});
});
function radio() {
varradioValue = $("input[name='vendor']:checked").val();
if (radioValue =="3") {
$("#txtComments").show();
} else {
$("#txtComments").hide();
}
}

In this code, first we have to write the code for every click event function as $(“#id”).click(function ().

Then after creating a function with their function name whereas I created a function whose function name as “radio”. Then take a variable name where I have taken as “radioValue” and by using $(“input[name=’vendor’]:checked”).val(),

We checked all the values of the vendor. Now call the function[radio()] after every click event of a button click.

Then after using the “if-else” condition, I have written the code for showing and hiding the text box for the “Others” option inside the “radio()” in JQuery which is mentioned above.

You may like the following jQuery tutorials:

In this tutorial, we learned how to handle radio button checked and unchecked events of Html by using JQuery.

>