CODEWITHSUNDEEP
jquery
MrG
MrG

Reputation: 5287

jQuery: select checkbox based on name and value

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:

  1. search for all radio's with name = chkbox and set attr('checked') = false
  2. 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!

Upvotes: 14

Views: 56955

Answers (6)

Midhun
Midhun

Reputation: 3988

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);

Upvotes: 6

tvanfosson
tvanfosson

Reputation: 532505

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>

Upvotes: 5

Rohan
Rohan

Reputation: 411

Try this:

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

Upvotes: 25

MrG
MrG

Reputation: 5287

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);
});

}

Upvotes: 8

stefanw
stefanw

Reputation: 10570

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

Upvotes: 1

Zed
Zed

Reputation: 57658

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

Upvotes: 0

Related Questions