Find out whether radio button is checked with JQuery?

javascript

event-listening

jquery

radio-button

byAnton Shumikhin·Nov 9, 2024

Determine if a radio button is selected by utilizing jQuery's .is() method coupled with the :checked pseudo-class:

var isSelected = $('input[name="radioName"]:checked').length > 0;

Replace "radioName" in the code above with your radio button's name attribute. If any radio button with that name is checked, isSelected will return true, or false otherwise.

Event binding and button interaction

Event listener binding

You can make jQuery listen for events using several methods. This includes the .click() method which offers cross-browser compatibility, including older versions of IE. Neat, right?

$('input[type="radio"]').click(function() {
  if ($(this).is(':checked')) {
    console.log("Radio button is checked. Let's party! 🥳");
  }
});

Actions based on state changes

Bind a click event to another UI element, like a button, to check a radio button's selected status. This allows you to prevent form submission if a button isn't selected. Because who submits forms willy nilly?

$('#submitBtn').on('click', function(e) {
  if (!$('input[name="radioName"]').is(':checked')) {
    alert("Hold on! Select an option first.");
    e.preventDefault();  // Don't you even think about submitting this form yet
  }
});

Getting ready for action

Make sure your jQuery code is wrapped within a $(document).ready() function. This makes sure the DOM is fully loaded before attaching event listeners or checking element states.

$(document).ready(function() {
  // Your awesome jQuery code goes here...and nowhere else!
});

Monitoring radio button activity

Listening for changes

Sometimes we all need a good eavesdropping session. You can keep an ear on a radio button's status with jQuery by attaching listeners for click or change events. Shh! Keep it down, the buttons are gossiping.

$('input[type="radio"][name="musicGenre"]').change(function() {
  if ($(this).is(':checked')) {
    console.log($(this).val() + " is now playing! Get your groove on! 🕺");
  }
});

Notifying about selections

Keeping your users in the loop about changes can significantly boost user experience. Use .is(':checked') within an event to trigger notifications.

$('input[type="radio"][name="notifications"]').on('click', function() {
  if ($(this).is(':checked')) {
    alert("Notifications enabled. Don't miss out on our sketches about rambunctious cats! 🐱");
  }
});

Targeting elements like a pro

At times, you might want to aim at radio buttons by class, name, or data attributes. Time to get fancy with your targeting:

$('.radioClass').is(':checked');              // Aiming by class
$('input:radio[name="radioGroup"]').is(':checked'); // Sighting by name
$('input[data-role="radioToggle"]').is(':checked'); // Sniping by data attribute

Checking before form submission

Before launching a form submission, make sure all necessary selections have been executed. Because sending incomplete forms is like ordering a cheeseburger with no cheese. Confusing and disappointing.

$('#form').submit(function(e) {
  if (!$('input[type="radio"][name="agreement"]').is(':checked')) {
    alert("You must agree to the terms. No signing blindly here, buddy!");
    e.preventDefault();  // Submission attempt = DENIED!
  }
});