如何檢查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';