javascript - Selected value of Radio Button doesn't change - Stack Overflow

admin管理员组

文章数量:1398812

In the view, I have these two radio buttons:

@Html.RadioButtonFor(c => c.CampaignType, "Exclusive")<label>Exclusive</label>
@Html.RadioButtonFor(c => c.CampaignType, "Shared")<label>Shared</label>

The value for Model.CampaignType is set in the controller before the page loads. All of this works fine. If Exclusive is what's saved in the DB, then we get this rendered in the HTML:

<input checked="checked" id="CampaignType" name="CampaignType" type="radio" value="Exclusive"><label>Exclusive</label>
<input id="CampaignType" name="CampaignType" type="radio" value="Shared"><label>Shared</label>

So far, all's well.

But, inside an onclick() event for a button, if I do this:

var values = 
    {
        "CampaignType": $('#CampaignType').val()
    }
alert(values.CampaignType);

The alert always es up as `Exclusive', even if I have changed the selection to 'Shared'.

What do I need to do so that values.CampaignType reflects the what is selected on the page, and not what was set when the page was loaded?

In the view, I have these two radio buttons:

@Html.RadioButtonFor(c => c.CampaignType, "Exclusive")<label>Exclusive</label>
@Html.RadioButtonFor(c => c.CampaignType, "Shared")<label>Shared</label>

The value for Model.CampaignType is set in the controller before the page loads. All of this works fine. If Exclusive is what's saved in the DB, then we get this rendered in the HTML:

<input checked="checked" id="CampaignType" name="CampaignType" type="radio" value="Exclusive"><label>Exclusive</label>
<input id="CampaignType" name="CampaignType" type="radio" value="Shared"><label>Shared</label>

So far, all's well.

But, inside an onclick() event for a button, if I do this:

var values = 
    {
        "CampaignType": $('#CampaignType').val()
    }
alert(values.CampaignType);

The alert always es up as `Exclusive', even if I have changed the selection to 'Shared'.

What do I need to do so that values.CampaignType reflects the what is selected on the page, and not what was set when the page was loaded?

• javascript
• jquery
• html
• css
• asp-mvc

Share Improve this question Follow edited Jan 7, 2017 at 17:14 kukkuz 42.4k66 gold badges6464 silver badges102102 bronze badges asked Jan 7, 2017 at 16:53 Casey CrookstonCasey Crookston 14k3030 gold badges121121 silver badges210210 bronze badges 6

• 1 you have the same id for both inputs... – kukkuz Commented Jan 7, 2017 at 16:55
• ookkkayy... so, maybe back to MVC radio buttons 101? I thought they needed the same id to be in the same group? Meaning, so if one is checked, the other is unchecked. They are both populated from the same object in the model: CampaignType – Casey Crookston Commented Jan 7, 2017 at 16:56
• you are talking about the name attribute and not id... – kukkuz Commented Jan 7, 2017 at 16:57
• The name attribute groups radio buttons, names don't need to be unique. – Teemu Commented Jan 7, 2017 at 16:57
• Use $(:radio[name="CampaignType"]:checked').val() – Ibrahim Khan Commented Jan 7, 2017 at 16:58

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

So you can do start with these:

1. Remove the invalid ids - multiple ids are invalid in CSS. For getting the value of the checked radio button you can use:

   $('input[name=CampaignType]:checked').val()
   

   or

   $('input[type=radio]:checked').val()
   

2. For the label to work you have to link it with the corresponding radio button using the for attribute.

See demo below:

function submit() {
  var values = {
    "CampaignType": $('input[name=CampaignType]:checked').val()
  }
  console.log(values.CampaignType);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input checked="checked" id="CampaignType1" name="CampaignType" type="radio" value="Exclusive">
<label for="CampaignType1">Exclusive</label>
<input id="CampaignType2" name="CampaignType" type="radio" value="Shared">
<label for="CampaignType2">Shared</label>
<br/>
<button onclick="submit()">click here</button>

All the best!

本文标签： javascriptSelected value of Radio Button doesn39t changeStack Overflow