CODEWITHSUNDEEP
jqueryasp.net-mvc
SlackerCoder
SlackerCoder

Reputation: 1351

Setting the value of a radio button with JQuery (ASP.NET MVC)

I have 2 "lists" of (4) radio buttons {value = "0", "1", "2", "3"} in all lists. The first list needs to drive the second list (which may occur multiple times). So if an option is selected in the first list, the SAME option is selected in the second list. It sounds weird, but it has a purpose. The first list is more of a "select all" type of list, and the second list is an individual selection list(s).

I have the value of the "selectall" list via JQuery:

$("#selectalllist").change(function() {
    var str = $('input[name=selectall]:checked').val();
    $(".radiolist").attr('checked', str);   //This is my thinking
});

The current selected value is stored in the str variable, and that is seemingly correct (I used alert to tell me what is stored, and it comes up what I expect). I just need to set the value of the next set of lists. The second line of the code I thought would set the checked value of $(".radiolist") to the stored value, but it ALWAYS set the value to the last entry (value = "3").

I'm wondering if I have the wrong attribute in the .attr('', str) call? Any thoughts?

As requested:

(Select All buttons)

<input type="radio" id="radCurrent" name="selectall" value="0" /><label for="radCurrent">Current</label>
<input type="radio" id="radFuture" name="selectall" value="1" /><label for="radFuture">Future</label>
<input type="radio" id="radCurrentAll" name="selectall" value="2" /><label for="radCurrentAll">CurrentAll</label>
<input type="radio" id="radFutureAll" name="selectall" value="3" /><label for="radFutureAll">FutureAll</label>

(Listing Buttons)

<input type="radio" name="selectvalue" id="Current" value="0" class="radiolist" /> C
<input type="radio" name="selectvalue" id="Future" value="1" class="radiolist" /> F
<input type="radio" name="selectvalue" id="CurrentAll" value="2" class="radiolist" /> CA
<input type="radio" name="selectvalue" id="FutureAll" value="3" class="radiolist" /> FA

Upvotes: 1

Views: 6721

Answers (2)

hunter
hunter

Reputation: 63512

You need to select the option

$("#selectall").change(function() {
    var str = $('#selectall:checked').val();
    $(".radiolist[value='" + str + "']").attr("checked", "checked");
});

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630349

To do this you need a slightly different approach, based on your posted html:

$("input[name=selectall]").change(function() {
  var str = $('input[name=selectall]:checked').val();
  $(".radiolist[value='" + str + "']").attr("checked", true);
});

A few things changed here:

  • The inputs have a name, not ID of selectall so need to select by that.
  • The attr("checked", true) can be true/false (instead of the value), there are cross-browser checks to handle this in j?Query internally.
  • For the setting, you also want to grab the radio button you want and check it. The fact that they're in the same group will make the brower uncheck the previous selection.

Upvotes: 1

Related Questions