使用jQuery获取当前选定的单选按钮的值

In MVC, I can define a set of radio buttons like so:

在MVC中，我可以定义一组这样的单选按钮:

@Html.RadioButtonFor(x => x.hasAcceptedAgreement, true) Yes
@Html.RadioButtonFor(x => x.hasAcceptedAgreement, false) No

which renders

这使得

<input id="hasAcceptedAgreement" name="hasAcceptedAgreement" type="radio" value="True" /> Yes
<input id="hasAcceptedAgreement" name="hasAcceptedAgreement" type="radio" value="False" /> No

I want to disable or enable a div based on what item is selected, which I've managed to do using this bit of jQuery:

我想根据选择的项目禁用或启用div，这是我使用jQuery实现的:

$(':radio[name=hasAcceptedAgreement]').change(function () {
    if ($(this).val() == 'True') {
        // display div
    } else {
        // hide div
    }
});

But when they submit the form, I also need to have a check to see which value is currently selected, then show/hide the appropriate section again (since the .change function won't be called on POST). Is there a way I can accomplish that?

但是，当他们提交表单时，我还需要检查一下当前选择的值，然后再次显示/隐藏适当的部分(因为.change函数在POST上不会被调用)。我有办法做到吗?

If I try to do if $(':radio[name=hasAcceptedAgreement]').val(), it will always evaluate to True since the ids are the same (I'm assuming). Is there some other way to get the value, or am I up creek because MVC likes to give the same name to each id?

如果我尝试使用$(':radio[name=hasAcceptedAgreement]').val()，它将始终是正确的，因为id是相同的(我假设)。是否有其他方法来获取值，还是因为MVC喜欢为每个id提供相同的名称，所以我有困难?

EDIT: By the way, I am aware I can just manually set the ids in the RadioButtonFor call - I just wondered if there was some easier built-in way to handle it I wasn't aware of.

编辑:顺便说一下，我知道我可以在RadioButtonFor调用中手动设置id——我只是想知道是否有一些更容易的内置方法来处理它，我没有意识到。

3 个解决方案

#1

As they say here: How can I get which radio is selected via jQuery? you may use:

正如他们在这里所说的:我怎样才能通过jQuery获得哪个广播?你可以使用:

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

to get the value of the currently selected radio.

获取当前所选收音机的值。

#2

I used the code below in a project I worked on and it worked!

我在一个我参与的项目中使用了下面的代码，它是有效的!

$(':radio[name=hasAcceptedAgreement]').change(function () {
    if ($('input[name=hasAcceptedAgreement]:checked').val() == 'True') {
        // display div
    } else {
        // hide div
    }
});

#3

$(function(){
   // executed once the dom is loaded

   // bind the change function as usual
   $(':radio[name=hasAcceptedAgreement]').change(function () {
        if ($(this).val() == 'True') {
            // display div
        } else {
            // hide div
        }
    }).change();  // and immediately trigger it
});

A small improvement for the change handler (so you don't need the if/else block)

更改处理程序的一个小改进(因此不需要if/else块)

$("#yourdiv").toggle( $(this).val() == 'True' );

#1