Radio buttons are essential form elements that allow users to select one option from multiple choices. As a web developer, you’ll often need to programmatically check or uncheck radio buttons using jQuery.
This comprehensive tutorial will show you exactly how to set radio button checked states using jQuery, with practical examples and best practices.
Basic Syntax for Setting Radio Buttons {#basic-syntax}
The most reliable way to set a radio button as checked in jQuery is using the prop() method. Here’s the basic syntax:
$('input[type="radio"]').prop('checked', true);Method 1: Use the prop() Method {#method-1-prop}
The prop() method is the recommended approach for modern jQuery versions (1.6+). It directly manipulates the DOM property rather than the HTML attribute.
Example 1: Check Radio Button by ID
A quick way to select a specific radio button when you already know its unique ID.
<form>
<input type="radio" id="option1" name="choice" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="choice" value="2">
<label for="option2">Option 2</label>
<input type="radio" id="option3" name="choice" value="3">
<label for="option3">Option 3</label>
</form>
<script>
// Check the radio button with ID 'option2'
$('#option2').prop('checked', true);
</script>You can see the output in the screenshot below.
Example 2: Check Radio Button by Value
Useful when you want to pick a radio button based on the value it carries rather than its ID.
// Check the radio button with specific value
$('input[name="choice"][value="2"]').prop('checked', true);Method 2: Use the attr() Method {#method-2-attr}
While prop() is preferred, you can also use attr() for older jQuery versions:
// Using attr() method (for jQuery versions below 1.6)
$('#option1').attr('checked', 'checked');
// To uncheck
$('#option1').removeAttr('checked');You can see the output in the screenshot below.
Note: The attr() method is less reliable for boolean properties in modern jQuery versions, so stick with prop() when possible.
Method 3: Use the val() Method {#method-3-val}
The val() method provides an elegant way to set radio buttons by specifying the value you want to select:
// Set the radio group to the specified value
$('input[name="choice"]').val(['2']);You can see the output in the screenshot below.
This method is particularly useful when you know the value but not the specific element ID, as referenced in the search results.
Set Radio Buttons on Page Load {#onload-examples}
Often, you’ll want to set default radio button selections when the page loads:
$(document).ready(function() {
// Method 1: Using prop()
$('#defaultOption').prop('checked', true);
// Method 2: Using val() for multiple radio groups
$('input[name="category"]').val(['electronics']);
$('input[name="priority"]').val(['high']);
});Complete Working Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>Product Category</h3>
<input type="radio" id="electronics" name="category" value="electronics">
<label for="electronics">Electronics</label><br>
<input type="radio" id="clothing" name="category" value="clothing">
<label for="clothing">Clothing</label><br>
<input type="radio" id="books" name="category" value="books">
<label for="books">Books</label><br>
<button id="selectElectronics">Select Electronics</button>
<button id="selectClothing">Select Clothing</button>
<script>
$(document).ready(function() {
// Set default selection on page load
$('#electronics').prop('checked', true);
// Button click handlers
$('#selectElectronics').click(function() {
$('input[name="category"][value="electronics"]').prop('checked', true);
});
$('#selectClothing').click(function() {
$('input[name="category"]').val(['clothing']);
});
});
</script>
</body>
</html>Check Radio Button Status {#checking-status}
Before setting radio buttons, you might want to check their current status. Here’s how to determine if a radio button is checked :
// Check if a specific radio button is checked
if ($('#option1').is(':checked')) {
console.log('Option 1 is selected');
}
// Get the value of the checked radio button in a group
var selectedValue = $('input[name="choice"]:checked').val();
console.log('Selected value: ' + selectedValue);
// Check if any radio button in a group is selected
if ($('input[name="choice"]:checked').length > 0) {
console.log('A choice has been made');
}Common Use Cases and Examples
Let me show you the common use cases and examples of setting a radio button checked in jQuery.
Dynamic Form Updates
A handy way to sync radio buttons with changing user selections elsewhere in the form.
// Update radio selection based on dropdown choice
$('#categoryDropdown').change(function() {
var selectedCategory = $(this).val();
$('input[name="category"][value="' + selectedCategory + '"]').prop('checked', true);
});Form Validation and Reset
Used when you need to clear choices or restore default radio selections after a reset.
// Reset all radio buttons in a form
$('#resetForm').click(function() {
$('input[type="radio"]').prop('checked', false);
});
// Set default values after reset
function setDefaults() {
$('input[name="priority"][value="medium"]').prop('checked', true);
$('input[name="category"][value="general"]').prop('checked', true);
}Conditional Logic
Perfect for triggering UI changes, showing or hiding elements, based on the selected option
// Show/hide content based on radio selection
$('input[name="membershipType"]').change(function() {
if ($(this).val() === 'premium') {
$('#premiumFeatures').show();
} else {
$('#premiumFeatures').hide();
}
});Best Practices {#best-practices}
Here are the best practices for setting a radio button checked in jQuery.
- Use prop() over attr(): For jQuery 1.6+, always use prop(‘checked’, true) instead of attr(‘checked’, ‘checked’).
- Include proper selectors: Be specific with your selectors to avoid conflicts:
// Good: Specific selector
$('input[name="category"][value="electronics"]').prop('checked', true);
// Avoid: Too generic
$('input').prop('checked', true);- Handle edge cases: Always check if elements exist before manipulating them:
if ($('#targetRadio').length) {
$('#targetRadio').prop('checked', true);
}- Trigger change events: When programmatically changing radio buttons, trigger the change event for any dependent functionality:
$('#option1').prop('checked', true).trigger('change');Setting radio buttons as checked using jQuery is easy with the right methods. The prop() method is your best choice for modern applications, while val() provides an elegant alternative when working with values. Remember to consider your specific use case and always test across different browsers to ensure compatibility.
Whether you’re setting default values on page load, responding to user interactions, or implementing complex form logic, these techniques will help you effectively manage radio button states in your web applications.
You may also like to read the other articles on jQuery:
- How to Check jQuery Version
- jQuery “$ is not a function” Error
- jQuery Get Text of Selected Option
- JavaScript vs jQuery: Key Differences
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
