如何检查Razor中的RadioButton是否已选中？

Question

我在cshtml文件中包含以下代码行，

<div class="YesNo">
    <label><input type="radio" name="YesNo_@pNum" value="Yes" />@yesLabel</label>
    <label><input type="radio" name="YesNo_@pNum" value="No" checked />@noLabel</label>
</div>

如何在Razor中使用if条件来检查是否选中了“是”单选按钮，然后仅显示特定标签？

我的模型中有这两个属性，

public string YesLabel { get { return COff.YesLabel ?? "Yes"; } }
public string NoLabel { get { return COff.NoLabel ?? "No"; } }

我在cshtml文件中也有2个变量，

var yesLabel = off.YesLabel;
var noLabel = off.NoLabel;

我的一个.cs文件中有这两个杂物，

public string YesLabel { get; set; }
public string NoLabel { get; set; }

我使用了此JS代码，并且可以正常工作，但是由于已经检查了我的“否”单选按钮，所以我无法获得所需的输出，也就是说，如果我在访问页面后选择“是”，则我的代码无法正常工作，因为“始终会在内存中检查“否”，

$(function () {                       
    var checkedRadio = $('[name="YesNo_@placementNumber"]:radio:checked').val();
    if (checkedRadio == "Yes") {
        $("#sel").html("Selected Value: " + checkedRadio);
    }
});

请任何帮助表示赞赏。

Answer 1

我不确定这是否是您的问题，但在您看来，您的name="YesNo_@pNum" 。 我猜测@pNum是服务器端变量，输出为name="YesNo_X" 。 然后在JS中，您有$('[name="YesNo_@placementNumber"] ，由于它不是radio的名称，因此将永远无法工作。

如果placementNumber是一个JS变量，则解决方案将通过以下方式更改选择器：

$('[name="YesNo_' + placementNumber + '"]:radio:checked')

如果没有可变placementNumber在你的JS，你可以一个ID添加到div包裹的电台，然后选择它，就像这样：

<div class="YesNo" id="radios">
    <label><input type="radio" name="YesNo_@pNum" value="Yes" />@yesLabel</label>
    <label><input type="radio" name="YesNo_@pNum" value="No" checked />@noLabel</label>
</div>

然后获取检查值：

var checkedRadio = $('#radios :radio:checked').val();

我认为您遇到的另一件事可能是您希望在选中的单选更改时运行代码。 我认为可能是因为：

我看不到我的代码正常工作，因为内存中始终选中“否”

因此，您需要做的是：

$(function () {                       
    var radios = $('[name="YesNo_@placementNumber"]:radio');
    radios.on("change", function() {
        if ($(this).prop("checked")) {
            $("#sel").html("Selected Value: " + $(this).val());
        }
    });
});

Answer 2

Razor是服务器端工具。 页面已加载后无法使用。 当客户端和服务器之间存在“来回”时，这与Webforms上的情况不同。

使用JS，您可以进行检查，还可以通过事件知道何时更改了输入。

您可以将标签存储在JS var上，或将其放置在隐藏的范围内，然后根据您的复选框将其打开和关闭。

例如：

var noLabel = '@noLabel';
var yesLabel = '@yesLabel';