頁面加載時如何根據單選按鈕值顯示/隱藏 div

Question

我有這個 JQuery 代碼如何在表單加載時使其工作，目前它僅適用於單選按鈕單擊

我有這個單選按鈕

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

我試過這個 jquery 但是我在頁面加載時沒有得到單選按鈕值，當單選點擊時它工作得很好，我怎樣才能讓它得到div model => model.RangeType,的值。

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

您只是在 onClick 處理程序中制作 div 顯示/隱藏，因此它只會在單擊時觸發，相反您還需要在頁面加載時調用相同的邏輯
我在 function 中分離了顯示/隱藏邏輯，因此您可以隨時調用它
我在這里寫了一些虛擬代碼試試這個。 我也使用了 else 而不是另一個if或者你也可以使用另一個 if

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

這是一個演示，它使用$(function(){})而不是$(window).load 。

看法：

<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);
    }

結果：

Answer 3

頁面加載后，如果要根據單選按鈕值顯示/隱藏 div，首先需要獲取選中的單選按鈕，然后根據值顯示或隱藏 div。 嘗試使用以下代碼：

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

output：