Jquery detecting id of selected button?

Question

Hi this is sending me around in circles.

Consider these radio buttons:

<input type="radio" class="win" id="50" value="1" name="match1" />
<input type="radio" class="cover" id="50" value="2" name="match1" />

<input type="radio" class="win" id="51" value="1" name="match2" />
<input type="radio" class="cover" id="51" value="2" name="match2" />

<input type="radio" class="win" id="52" value="1" name="match3" />
<input type="radio" class="cover" id="52" value="2" name="match3" />

When the form is submitted I want to know the id of any of the buttons which are selected.

Some of the button pairs may not be selected at all.

I tried:

for (var x=1; x<4; ++x){

     if($('form #'+$(this).attr("id")+'input:radio[name=match'+x+']').prop('checked', true)){
          alert('Checked;);
     }

}

But it always evlautes to true.

Thanks

`id` attributes **need** to be unique ! (*and they should not start with a number unless you use html5*) — Gabriele Petrioli, Apr 11 '13 at 14:51
possible duplicate of [How can I check whether a radio button is selected in javascript?](http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-in-javascript) — Nix, Apr 11 '13 at 14:52

score 1 · Accepted Answer · answered Apr 11 '13 at 14:51

1

You're setting the value to true. Remove the ,true from the prop call:

if($('form #'+$(this).attr("id")+'input:radio[name=match'+x+']').prop('checked')){
      alert('Checked;);
}

When you set the property with .prop('checked', true) it returns the jQuery element that you called it on - and that evaluates to true.

answered Apr 11 '13 at 14:51

Matt Zeunert

16,075
6
52
78

I removed the true and now it always evaluates to be false! – Alan A Apr 11 '13 at 15:06
Thanks! I had to remove the 'form id' and then it worked... so: if($('input:radio[name=match'+x+']').prop('checked')) – Alan A Apr 11 '13 at 15:11

score 1 · Answer 2 · answered Apr 11 '13 at 14:51

1

You are setting the checked property in if instead of just getting

Change

if($('form #'+$(this).attr("id")+'input:radio[name=match'+x+']').prop('checked', true))

To

if($('form #'+$(this).attr("id")+'input:radio[name=match'+x+']').prop('checked'))

answered Apr 11 '13 at 14:51

Adil

146,340
25
209
204

Can you show me where it is still deprecated in latest jQuery version? – Adil Apr 11 '13 at 14:53
No problem thanks for sharing the link and effort to help me, I will delete mine. – Adil Apr 11 '13 at 14:59

score 0 · Answer 3 · answered Apr 11 '13 at 14:54

0

I believe this will answer your question:

for (var i = 0, len = 4; i < len; i++) {
    if ( $('input[name=match' + i + ']:checked').val() ) {
        alert("Checked");
    }
}

answered Apr 11 '13 at 14:54

lt.kraken

1,287
3
10
27

score 0 · Answer 4 · answered Apr 11 '13 at 14:59

0

Here's a full working piece of code for your scenario, with example jsFiddle at: http://jsfiddle.net/CV4x8/

<input type="radio" class="win" id="50" value="1" name="match1" />
<input type="radio" class="cover" id="50" value="2" name="match1" />

<input type="radio" class="win" id="51" value="1" name="match2" />
<input type="radio" class="cover" id="51" value="2" name="match2" />

<input type="radio" class="win" id="52" value="1" name="match3" />
<input type="radio" class="cover" id="52" value="2" name="match3" />

<button id="getChecked"></button>

function alertChecked() {
   for (var i = 0, x = 4; i < x; i++) {
       if ( $('input[name=match' + i + ']').is(':checked')) {
           alert("Checked");
        }
    }
}

$('#getChecked').click(function() {
    alertChecked();
});

answered Apr 11 '13 at 14:59

Chris Dixon

9,147
5
36
68

This also worked thnaks. What is the difference between ".is(':checked')" and "prop('checked')" - should I use one over another – Alan A Apr 11 '13 at 15:11
Not 100% sure in terms of efficiency, but I find it more readable, so I can look back on my code and figure out what's going on easier. – Chris Dixon Apr 11 '13 at 15:15
This is strange, the code works I can detect which radio buttons were checked. My script then clears all of the checked buttons that were previously checked. Then if I re-select some of the buttons and re-submit the form none are detected as being selected! – Alan A Apr 11 '13 at 15:43
Ok I solved it and in doing so I think I have answered the question as to the difference between ".is(':checked')" and "prop('checked')". The later detected input that I had set by jquery. The former detected input when I had selected it by my mouse. Without the ".is(':checked')" the input was not detected if previously I had cleared any selected buttons with my script. – Alan A Apr 11 '13 at 15:59

score 0 · Answer 5 · answered Apr 11 '13 at 15:06

First of all don't use multiple ID's and don't start them with numbers cause it's no valid HTML.

$("input[type='radio']:checked").each(function( index ) {
     $('#output').append($(this).attr('id')+' is checked<br />');
});

Here is a jsFiddle that works in your case: http://jsfiddle.net/RGZH7/3/

Jquery detecting id of selected button?

5 Answers5