页面加载时如何根据单选按钮值显示/隐藏 div

Question

I have this JQuery Code how can i make it to work when form load, currently it only work on radio button click

I have this radio button

 <div class="m-b">
   <label class="form-check-inline p-l-md m-l-0 m-r-md">
     @Html.RadioButtonFor(model => model.RangeType, "true", new { @name = "projectrange" })
  <div class="check-icon-radio"><i></i></div>Range
    </label>
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
       @Html.RadioButtonFor(model => model.RangeType, "false", new { @name = "projectrange" })
    <div class="check-icon-radio"><i></i></div>Single Code
      </label>
   </div>

I tried this jquery but i doesnt get the radio button value when page load it works great when radio click, How can i make it to get the value of model => model.RangeType, and show/hide the div

  $(window).load(function () {
        $("input[name$='RangeType']").click(function () {
            if ($(this).is(':checked') && $(this).attr("value") == "true") {
                $('#singleCode').hide();
                $('#projectRange').show();
            }
            if ($(this).is(':checked') && $(this).attr("value") == "false") {
                $('#projectRange').hide();
                $('#singleCode').show();
            }
        });
    });

Answer 1

You are just making div show/hide inside onClick handler so it will only get trigger on Click, instead you also need to call same logic on page load
I separated the show/hide logic in a function so you can call it anytime
I have wrote some dummy code down here try this. I have also used else instead of another if or you can use another if also

$(window).load(function () {
        $("input[name$='RangeType']").click(toggleDiv());

        function toggleDiv(){
            var radio = "input[name$='RangeType']";
            if ($(radio).is(':checked') && $(radio).attr("value") == "true") {
                $('#singleCode').hide();
                $('#projectRange').show();
            }else{
                $('#projectRange').hide();
                $('#singleCode').show();
            }
        }

       toggleDiv();
});

Answer 2

This is a demo worked,and it uses $(function(){}) rather than $(window).load .

View:

<div class="m-b">
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        @Html.RadioButtonFor(model => model.RangeType, "true", new { @name = "projectrange" })
        <div class="check-icon-radio"><i></i></div>Range
    </label>
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        @Html.RadioButtonFor(model => model.RangeType, "false", new { @name = "projectrange" })
        <div class="check-icon-radio"><i></i></div>Single Code
    </label>
    <div id="singleCode">
        singleCode
    </div>
    <div id="projectRange">
        projectRange
    </div>
</div>
@section scripts{ 
<script type="text/javascript">
    $(function () {

        var radio = "input[name$='RangeType']";
        console.log($(radio).attr("value"));
        if ($(radio).is(':checked') && $(radio).attr("value") == "true") {
            $('#singleCode').hide();
            $('#projectRange').show();
        }
        if ($(radio).is(':checked') && $(radio).attr("value") == "false") {
            $('#projectRange').hide();
            $('#singleCode').show();
        }
    })
</script>

Controller:

public IActionResult TestRadioButton() {
        TestRadio test = new TestRadio { RangeType = "true" };
        return View(test);
    }

Result:

Answer 3

After the page load, if you want to show/hide div based on radio button value, first, you need to get the checked radio button, then, based on the value show or hide the div. Try to use the following code:

<div class="m-b">
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        @Html.RadioButtonFor(model => model.RangeType, "true", new { @name = "projectrange" })
        <div class="check-icon-radio"><i></i></div>Range
    </label>
    <label class="form-check-inline p-l-md m-l-0 m-r-md">
        @Html.RadioButtonFor(model => model.RangeType, "false", new { @name = "projectrange" })
        <div class="check-icon-radio"><i></i></div>Single Code
    </label>
</div>

<div id="singleCode" >
    singleCode Div
</div>
<div id="projectRange">
    projectRange Div
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(window).load(function () {
        $("input[name$='RangeType']").click(function () {
            if ($(this).is(':checked') && $(this).attr("value") == "true") {
                $('#singleCode').hide();
                $('#projectRange').show();
            }
            if ($(this).is(':checked') && $(this).attr("value") == "false") {
                $('#projectRange').hide();
                $('#singleCode').show();
            }
        });

        //after page load, based on the checked radio button to show/hide div.
        if ($("input[name$='RangeType']:checked").val() =="true") {
            $('#singleCode').hide();
            $('#projectRange').show();
        } else {
            $('#projectRange').hide();
            $('#singleCode').show();
        }
    });
</script>

The output: