使用 jquery 基于单选按钮选择隐藏 div答案

【问题标题】：hiding divs based on radio button selection using jquery使用 jquery 基于单选按钮选择隐藏 div
【发布时间】：2015-10-12 12:34:50
【问题描述】：

我有两个单选按钮代表真假。当我选择 false 时，我想隐藏 orderaddress1 标签和文本框。我用jquery 好像不行

这是我的单选按钮视图：

<div class="delivery">
        <div class="form-group">
            @Html.LabelFor(model => model.DeliveryChoice, "DeliveryChoice", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div>
                    <label>@Html.RadioButton("DeliveryChoice", true) Deliver my order to me</label>
                </div>
                <div>
                    <label>@Html.RadioButton("DeliveryChoice", false) I will pick up my order</label>
                </div>
            </div>
        </div>
            </div>

文本框和标签视图：

<div class="Add1">
            <div class="form-group ">
                @Html.LabelFor(model => model.OrderAdress1, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.OrderAdress1, new { htmlAttributes = new { @class = "box" } })
                    @Html.ValidationMessageFor(model => model.OrderAdress1)
                </div>
            </div>
        </div>

jquery：

<script>

    $(document).ready(function(){
        $('#radio_button').click(function () {
            if ($("input[name='name']:checked").val() == false)
                $('.Add1').hide();
        });

        });

</script>

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-5

【解决方案1】：

你的 jQuery 选择器不正确

您没有带有id="radio_button" 的元素，因此$('#radio_button') 不存在。然后在里面，你有 $("input[name='name']:checked") 但你没有任何输入 name="name"

你的脚本需要

// cache elements that you repeatedly reference
var address = $('.Add1');
// handle the change event of all radio button inside elements with class="delivery"
$('.delivery input[type="radio"]').change(function() {
    if ($(this).val() === 'true') {
        address.hide();
    } else {
        address.show();
    }
});

参考fiddle

旁注：

您的@Html.LabelFor(model => model.DeliveryChoice, ...) 是创建一个将选择第一个单选按钮的标签（不太可能成为用户所期望的）
您生成的 html 无效，因为两个单选按钮都有重复 id 属性。由于您不需要id，您可以使用@Html.RadioButton("DeliveryChoice", true, new { id = "" })
不清楚为什么你的 div 有类名而不是 id 属性。如果您有多个带有 class="delivery" 的 div 和 class="Add1" 那么上面的脚本需要修改才能使用相对选择器。

【讨论】：

【解决方案2】：

试试

<script type="text/javascript">
    $(document).ready(function(){

$('input:radio[name="name"]').change(function(){
    if($(this).val() == 'false'){
        $('.Add1').hide();   }
});

});
</script>

【讨论】：

【解决方案3】：

试试这个：

  $(document).ready(function () {
    $('input[name=DeliveryChoice]').change(function () {
        $(this).attr('value') === 'False' ? $('.Add1').hide() : $('.Add1').show();
    });
});

【讨论】：