In jQuery, how do I select an element by its name attribute?

More about selectors

Using Attribute Selectors to Target Specific Elements

You can use attribute selectors in jQuery to select elements based on their name or any other attribute.

$("input[type='radio'][name='theme']")


This will target only the <input> elements of type radio with the name "theme".

Working with Click Events

jQuery provides .click() function for attaching click event handlers to the DOM. Use it like this-

$("input[type='radio'][name='theme']").click(function() {
  // "alert," I'm a radio button! Let me tell you my value.
    alert($(this).val()); 
});


Handling Checked Status

The :checked pseudo-class selector comes handy when you need to select or manipulate checked form elements. Here’s how to use on radio buttons -

// "Let the user know about the checked status"
var selectedValue = $("input[type='radio'][name='theme']:checked").val(); 


This will select the checked radio button from a group of radio buttons, before retrieving its value.

Additional Good Practices

Avoiding Multiple IDs

Make sure to use only unique IDs for each HTML element.

$('.radio-group[name="theme"]')


Use the example above to group elements with the same classes or names into a group called "theme".

Optimizing DOM Traversal

This is one rule thumb for better performance: Minimize DOM traversal. Check out the example below.

// Let's limit our DOM-traversal workout with jQuery.
var $radios = $('input:radio[name=theme]')
    $radios.click(function() {
        var value = $(this).filter(":checked").val();
        // Now, do something cool with the radio.
    });


Ensuring Cross-Browser Compatibility

Finally, ensure your jQuery solution works across all browsers. jQuery does a good job hiding the differences between different browsers, but it's always good to double-check.