jQuery: select checkbox based on name and value

Question

I have the following HTML:

<form id="test">
  <input type="radio" value="A" name="C1"/>
  <a href="javascript:selectCheckbox('C1', 'A');"> OPTION-A </a>

  <input type="radio" value="B" name="C1"/>
  <a href="javascript:selectCheckbox('C1', 'B');"> OPTION-B </a>

 <input type="radio" value="C" name="C1"/>
  <a href="javascript:selectCheckbox('C1', 'C');"> OPTION-C </a>

  // several other: C2, C3, ..
</form>

And I'm trying to implement selectCheckbox( chkbox, value), which should:

search for all radio's with name = chkbox and set attr('checked') = false
search for the radio having name = chkbox AND val() = value and set attr('checked') = true

I can't figure out, what the right selector is, I tried the following without any luck:

var name = "#" + chkbox + " :checked";
$(name).each(..  // doesn't work

$('#'+chkbox).each( .. // if finds only the first occurence
                       // of i.e. C1, although I would expect 3

$("input[@name='"+chkbox+"']").each( function() { ..
// leaves me with the following error:
// Warning: Expected attribute name or namespace but found '@name'

Please let me know what I'm doing wrong. Many, many thanks!

You shouldn't have multiple elements with the same ID ("C1") — Zed
– Zed, Commented Sep 19, 2009 at 17:13
"Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the '@' symbol from your selectors in order to make them work again." — Zed
– Zed, Commented Sep 19, 2009 at 17:17

cssyphus · Accepted Answer · 2014-01-10 17:36:34Z

25

Try this:

$('input:radio[name="' + chkboxName + '"][value="' + value + '"]')
    .attr('checked', 'checked');

edited Jan 10, 2014 at 17:36

cssyphus

40.4k21 gold badges104 silver badges125 bronze badges

answered Apr 2, 2013 at 21:19

Rohan

4114 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrG · Accepted Answer · 2009-09-19 17:24:24Z

8

Thanks for your help, I finally got it:

function selectTestAnswer( chkbox, value ) {
    $("[name="+chkbox+"]").each( function() {   
        if ( $(this).val() ==  value )
            $(this).attr('checked', true);
        else
            if ( $(this).attr('checked') == true)
                $(this).attr('checked', false);
});

}

answered Sep 19, 2009 at 17:24

MrG

5,30717 gold badges52 silver badges66 bronze badges

Comments

Midhun · Accepted Answer · 2016-04-20 06:01:26Z

6

You can use prop() instead of attr() if your jquery version > 1.6

Refer this link http://api.jquery.com/prop/

As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

So the code you are looking for looks more like

$('input:checkbox[name="Validators"][value="' + v + '"]').prop('checked',true);

edited Apr 20, 2016 at 6:01

answered Apr 20, 2016 at 4:15

Midhun

3,9981 gold badge25 silver badges27 bronze badges

Comments

Jens · Accepted Answer · 2015-01-06 13:52:18Z

I'd use relative DOM position to do the navigation. Note also you can't have different elements with the same id, but in this case it isn't necessary since you can use the attribute selector on the name to find the correct inputs. Note that you already know which of the various inputs need to be checked based on the position of the link that is clicked. I prefer to have the code separate from the markup so I've given the links a class to make them easy to select and moved the click handler application into the code.

Update: Note that I removed the code to uncheck the other radios. With radios, setting one to checked should automatically uncheck any of the others.

$(function() {
     $('a.checkbox-selector').click( function() {
         // get the checkbox immediately preceding the link -- this should
         // be checked.  Checking it should automatically uncheck any other
         // that may be checked.
         $(this).prev(':checkbox');
                .attr('checked',true);
         return false;  // don't process the link
     });
});

<form id="test">
  <input  type="radio" value="A" name="C1"/>
  <a href="#" class="checkbox-selector"> OPTION-A </a>

  <input  type="radio" value="B" name="C1"/>
  <a href="#" class="checkbox-selector"> OPTION-B </a>

  <input  type="radio" value="C" name="C1"/>
  <a href="#" class="checkbox-selector"> OPTION-C </a>

  <!-- several other: C2, C3, ... -->
</form>

stefanw · Accepted Answer · 2009-09-19 17:15:01Z

1

You can't have multiple elements with the same id on one page. All your input-elements have the id "C1".

answered Sep 19, 2009 at 17:15

stefanw

10.6k4 gold badges38 silver badges35 bronze badges

1 Comment

David Andres Over a year ago

You can, but it's a bad thing to do for a few reasons. Try it out, and note that difference between $("#id") and $("[id=id]). The latter will return a wrapped set of however many elements share id "id," while the former returns a wrapped set containing only the first declared element with this id.

Zed · Accepted Answer · 2009-09-19 17:14:59Z

0

Try $("input[name='C1'] :checked]"). IDs should be unique, so jquery probably doesn't expect to return more than one element.

answered Sep 19, 2009 at 17:14

Zed

57.8k9 gold badges79 silver badges101 bronze badges

1 Comment

mokumaxCraig Over a year ago

This syntax is not well formed.

Collectives™ on Stack Overflow

jQuery: select checkbox based on name and value

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related