jQuery: checked value from variable name or $(this)

Question

If I have some radio buttons:

<input type="radio" name="test" value="apple"> Apple<br/>
<input type="radio" name="test" value="banana" CHECKED> Banana<br/>
<input type="radio" name="test" value="carrot"> Carrot<br/>

and I then define the radio group in jQuery with

var test = $('input:radio[name="test"]')

How can I get the value of the checked element based on the variable test without re-writing

var test_val = $('input:radio[name="test"]:checked').val();

I've tried both

$(test):checked.val();
test:checked.val();

And as part of a change function I've also tried this:

$(test).change(function() {
    if ($(this):checked.val() == 'no') {
        $('#featured').stop().fadeOut();
    } else if ($(this):checked.val() == 'yes') {
        $('#featured').stop().fadeIn();
    }
});

Just wondering if this is possible or if I have to re-write out the full input selector to get the value.

P.S.
If IE8 doesn't support the :checked selector, what can I use instead?

No browser supports `:checked` the way you use it. It is invalid JS syntax. A selector is always in a string. There are some methods which have the same effect as a selector, but they are called just like normal methods. — Felix Kling, Jan 31 '11 at 09:11

jAndy · Accepted Answer · 2011-01-31T09:14:59.523

9

You can use .filter()^help:

test.filter('input:checked')

.filter() does also support a callback:

test.filter(function() {
    return this.name === 'test' && this.checked
});

I wasn't aware that the :checked selector does not work with IE8. If that is true, the latter example should work (accessing the node expando directly)

edited Jan 31 '11 at 09:14

answered Jan 31 '11 at 09:08

jAndy

231,737
57
305
359

And I think the OP only concluded that `:checked` does not work in IE8 because the syntax he/she used does not work. jQuery will definitely make sure that it works in all browsers. – Felix Kling Jan 31 '11 at 09:20
@FelixKling - I thought I read that somewhere. Can I presume it is incorrect and :checked does work in IE? My broken syntax wasn't working in any browser. – helgatheviking Jan 31 '11 at 10:07
@helgatheviking: yes, `.filter('input:checked')` does work cross-browser. – jAndy Jan 31 '11 at 10:11
@helgatheviking: Well I can only assume as jQuery claims to be cross-browser compatible, that every aspect of jQuery works in every browser. Also the documentation does not mention any issue with IE. – Felix Kling Jan 31 '11 at 10:13

score 0 · Answer 2 · answered Jan 31 '11 at 09:12

You are trying to mix "CSS syntax" with JavaScript syntax. That won't work.

You can use jQuery's filter() method to limit the elements selected with a previous jQuery query:

var test = $('input:radio[name="test"]')

var test_val = test.filter(":checked").val();

score 0 · Answer 3 · answered Jan 31 '11 at 09:15

0

try this...

$(test).change(function() {
 if ($(this).is(':checked').val() == 'no'){
   $('#featured').stop().fadeOut();
 } else if ($(this).is(':checked').val() == 'yes'){
  $('#featured').stop().fadeIn();
 }
});

answered Jan 31 '11 at 09:15

Vivek

10,978
14
48
66

score 0 · Answer 4 · answered Jan 31 '11 at 09:17

0

Startibg from var test, you can use the .filter() function, as shown in this jsFiddle

var test = $('input:radio[name="test"]');
alert(test.filter(':checked').val());

answered Jan 31 '11 at 09:17

RichardTheKiwi

105,798
26
196
262

jQuery: checked value from variable name or $(this)

4 Answers4