In this tutorial we will learn how to Check radio button Dynamically with jQuery. For this we can use jQuery prop() method which will check the radio button on click of a button.
Table of Contents
jQuery prop() method
jQuery prop() method sets or returns the properties and values of the selected HTML element.
In this example prop() method is used to set the checked property of radio button to true.
HTML Code
HTML Code is given below, in this code we have two radio buttons with their labels and two buttons to check these radio buttons.
<!DOCTYPE html>
<html>
<head>
<title>Check radio button Dynamically with jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<label for='male'>Male</label>
<input type="radio" id="male" name="gender">
<label for='female'>Female</label>
<input type="radio" id="female" name="gender">
<br><br>
<button id="maleBtn">Male</button>
<button id="femaleBtn">Female</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, jQuery click() method is used to execute two different functions on click of two different buttons. These two functions will check the radio buttons dynamically.
Inside these functions prop() method will set the value of checked property.
jQuery id selector is used to select the radio buttons.
<script>
$(document).ready(function(){
$('#maleBtn').click(function(){
$('#male').prop("checked" , "true");
});
$("#femaleBtn").click(function(){
$('#female').prop("checked", "true");
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Check radio button Dynamically with jQuery.