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

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

指拨小提琴

旁注：

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

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