Updated February 21, 2023
Introduction to jQuery Radio Button Checked
JQuery radio button checked by using prop method, or we can dynamically check or uncheck radio buttons. Such as when a button is clicked or a hyperlink is clicked. JQuery 1.6 and up is required for the prop method. To discover the value of a selected radio button inside a group, we need to use the jQuery-checked selector in conjunction with the Val method.
jQuery radio button checked overview
- The checked selector is used for checkboxes, radio buttons, and select element choices. Use of the selected selector to receive only the options of select elements that have been selected.
- The selector and Val methods of the jQuery API can be used to get the value of a chosen radio input or button.
- We can utilize the jQuery API method checked selector to access or choose radio values.
How to use the jQuery radio button checked?
- Client-side scripting, such as jQuery or JavaScript, is frequently used to construct interactive and fast-performing websites that can do simple activities like form validations without requiring a second trip to the webserver.
- We may update the selection based on an event like a button click or any other element selection once we know how to update the radio button using jQuery.
- Referring to a radio button by its ID is one of the finest ways to preselect it. We append the prefix # to the ID and set the checked value to true to pick the DOM element using ID.
- The value of the radio button can also be used to preselect the radio button. When we don’t know the ID of a Radio Button but know the value, selection by value can be handy.
- We may select the element with a value of two using the parent div ID. The checked attribute can be set to true at this point.
- In some circumstances, where we know there are no other items in the DOM that are equal to the predetermined value, we can check if the value is equal. We won’t require the parent ID in this scenario.
- When users are offered mutually exclusive options, they are given radio buttons. The horizontal display is possible using the class=’radio-inline’.
- We occasionally retrieve entries from a database table and want to give the user the option of changing a field from True to False or vice versa.
- We’ll pick one of the two radio buttons based on the record’s stored value. We need to know two variables once the user selects one radio button. The first is the record number, and the second is which radio button is selected out of two.
- By modifying the checked property of the input type, there are two ways to change the presently selected radio button dynamically. Below are the two methods used to change the property dynamically.
- By using the prop method.
- By using the attr method.
- Below is a detailed description of these two methods as follows. The syntax of this method is different.
By using the prop method
- We can access the input and change its property using the prop method. This method manipulates the checked property, setting it to true or false depending on whether it should be checked or unchecked.
- This method is very useful for accessing the input and changing the property. Below is the syntax of the prop method in jQuery as follows.
Syntax –
$("element").Prop("checked", true)- In the above example, the element is defined as element options; also, we have used the prop method to check the radio button in jQuery.
- Below is an example of the prop method in the jQuery radio button.
Code –
<!DOCTYPE html>
<head>
<title>
jQuery radio button checked by using prop method
</title>
<script src=
"https://code.jQuery.com/jQuery-2.2.4.min.js">
</script>
</head>
<body>
<h1 style="color: Red">
jQuery radio button checked by using prop method
</h1>
<b>
Check and uncheck the radio button below using the prop method in jQuery.
</b>
<p>
<input type="radio" name="option" id="Red">
Red Colour Radio Button
<input type="radio" name="option" id="Yellow">
Yellow Colour Radio Button
</p>
<p>
<button type="button" class="Check-Red">
Click the red radio button
</button>
<button type="button" class="check-yellow">
Click the yellow radio button
</button>
<button type="button" class="reset">
Reset the color
</button>
</p>
<script type="text/javascript">
$(document).ready(function () {
$(".Check-Red").click(function () {
$("#Red").prop("checked", true);
});
$(".check-yellow").click(function () {
$("#Yellow").prop("checked", true);
});
$(".reset").click(function () {
$("#Red").prop("checked", false);
$("#Yellow").prop("checked", false);
});
});
</script>
</body>
</html>
By using the attr method
- It’s similar to the prop method in jQuery but better suited to older versions of jQuery. We can access the input and modify its properties using the attr method.
- Whether we want to check or uncheck something, we must change the ‘checked’ property and set it to true or false.
- When setting the attribute to ‘true,’ it is required to provide a click method to ensure that the option in the option group is modified.
- This method is very useful for accessing the input and modifying the property. Below, the syntax of the prop method in jQuery is as follows.
Syntax –
$("element").attr("checked", true)- In the above example, the element is defined as element options; also, we have used the attr method to check the radio button in jQuery.
- Below is the example of the attr method in the jQuery radio button.
Code –
<!DOCTYPE html>
<head>
<title>
jQuery radio button checked by using attr method
</title>
<script src=
"https://code.jQuery.com/jQuery-2.2.4.min.js">
</script>
</head>
<body>
<h1 style="color: Red">
jQuery radio button checked by using attr method
</h1>
<b>
Check and uncheck the radio button below using the attr method in jQuery.
</b>
<p>
<input type="radio" name="option" id="Red">
Red Colour Radio Button
<input type="radio" name="option" id="Yellow">
Yellow Colour Radio Button
</p>
<p>
<button type="button" class="Check-Red">
Click the red radio button
</button>
<button type="button" class="check-yellow">
Click the yellow radio button
</button>
<button type="button" class="reset">
Reset the color
</button>
</p>
<script type="text/javascript">
$(document).ready(function () {
$(".Check-Red").click(function () {
$("#Red").attr("checked", true);
});
$(".check-yellow").click(function () {
$("#Yellow").attr("checked", true);
});
$(".reset").click(function () {
$("#Red").attr("checked", false);
$("#Yellow").prop("checked", false);
});
});
</script>
</body>
</html>
Conclusion
The prop and attr methods of jQuery API can be used to get the value from radio input or button. We can utilize the jQuery API method checked selector to access or choose radio values. JQuery radio button checked by using prop method, or we can dynamically check the buttons.
Recommended Articles
This is a guide to jQuery Radio Button Checked. Here we discuss How to check the jQuery radio button and the overview and codes. You may also look at the following articles to learn more –
