jQuery className woes

Question

I'm trying to get the name of a class that matched a regex of a checked input.

If I have this:

 <input type="radio" class="toggle toggle-1" />
 <input type="radio" class="toggle toggle-2" checked="checked" />
 <input type="radio" class="toggle toggle-3" />

I want to find out that 'toggle-2' is the checked class.

 $('.toggle:checked').className.match(/toggle\-.+?\b/);

But that produced 'className is undefined' errors.

I think my problem is that I'm using className against a jQuery object. But I'm not really sure what the alternative is.

Answer 1

You can call the attr method to get any underlying attributes on the element you need.

$('.toggle:checked').attr('class').match(/toggle\-.+?\b/); 

Answer 2

className is a standard DOM member, not a jQuery wrapper property. Either access through $('something')[0].className or jQuery $('something').attr('class'), but you can't mix them.

You appear to have multiple radio​s without a shared name? That won't work, they'll all act ast separately checkable fields. All radio controls that belong together need to have the same name (but different value​s) and be placed within the same form.

Answer 3

Don't you need an Id on all items jQuery is to look at?

Answer 4

$('.toggle:checked').hasClass('toggle-2');