How to check if a RadioButton is checked in Razor?

Question

I have the following lines of code in a cshtml file,

<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>

How can I use an if condition in Razor to check if "Yes" radiobutton is checked and then only display a certain label?

I have these 2 properties in my model,

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

I have 2 variables for that as well in the cshtml file,

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

I have these 2 porperties in one of my .cs files,

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

I used this JS code and it worked but since my "No" radioButton is already checked, I am not able to get the desired output,that is if I select "Yes" after visiting the page, i dont see my code working because "No" is always checked in the memory,

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

Please any help is appreciated.

Answer 1

I'm not sure if this is your problem but I see that in your view you have name="YesNo_@pNum" . I'm guessing that @pNum is a server side variable and the the output is name="YesNo_X" . Then in the JS you have $('[name="YesNo_@placementNumber"] , which will never work because that's not the name of the radio .

If placementNumber is a JS variable, the solution would be changing the selector with:

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

If there is no variable placementNumber in your JS, you could add an id to the div wrapping the radios and then selecting it, like this:

<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>

And then for getting the checked value:

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

The other thing I think your problem might be is that you want your code to run when the checked radio changes. I believe that might be it because of:

i dont see my code working because "No" is always checked in the memory

So, what you need to do is:

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

Answer 2

Razor is a server side tool. It cannot work after the page is already loaded. It is not like on webforms when there is 'back and forth' between the client and the server.

With JS you can do the check, also with an event to know when the input was changed.

You store your labels on a JS var, or place them on a hidden span, toggle them on and off according to your checkbox.

For example:

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