Question

我有两个单选按钮，用于真假。当我选择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>

Answer 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"然后需要修改上面的脚本才能使用相对选择者。

Answer 2

尝试

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

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

});
</script>

Answer 3

试试这个：

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

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

3 个答案: