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

【问题标题】：How can show/hide div based on radio button value when Page Load页面加载时如何根据单选按钮值显示/隐藏div
【发布时间】：2020-06-11 04:26:05
【问题描述】：

我有这个 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，但是当页面加载时我没有得到单选按钮的值，它在单选点击时效果很好，我怎样才能让它获得 model => model.RangeType, 的值并显示/隐藏 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();
            }
        });
    });

【问题讨论】：

标签： javascript jquery asp.net asp.net-core

【解决方案1】：

页面加载后，如果要根据单选按钮值显示/隐藏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>

输出：

【讨论】：

【解决方案2】：

您只是在 onClick 处理程序中使 div 显示/隐藏，因此它只会在单击时触发，相反，您还需要在页面加载时调用相同的逻辑
我在一个函数中分离了显示/隐藏逻辑，以便您可以随时调用它
我在这里写了一些虚拟代码试试这个。我也用 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();
});

【讨论】：

Rohit，谢谢它在两种情况下都显示 projectRange div，即使选择了单码无线电，但它显示 progectRange div
对不起，我不明白这两个条件你是指if else 还是load/click 的东西，你可以像以前一样在函数中使用两个if 块
对不起 Rohit 我所说的条件是当RangeType== true 和RangeType==false 显示projectRange div 时，RangeType==false projectRange 假设是隐藏的，singleCode 假设是可见的
你能在if语句之前console.log($(radio).attr("value"))或者你可以使用和删除字符串检查if ($(radio).is(":checked")) { // do something }

【解决方案3】：

这是一个演示，它使用$(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>

控制器：

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

结果：

【讨论】：