Question

我正在使用jQuery在无线电选择上显示/隐藏div。这工作正常，但我不想扩展它，因此默认情况下在页面加载时选择特定的无线电。

这是HTML

<input type="radio" id="Payment1">Payment1
<input type="radio" id="Payment2">Payment2

<div id="PaymentContainer1" style="display:none;">Payment 1 container</div>
<div id="PaymentContainer2" style="display:none;">Payment 2 container</div>

的jQuery

$(document).change(function () {
    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});

这是小提琴http://jsfiddle.net/teva/yauCs/1/

我尝试添加

$("#Payment1").prop("checked", true);

但它不起作用。

感谢

编辑任何方式使特定div中的字段不仅隐藏，而是禁用？我正在为所有div使用一个表单，当我用jQuery隐藏它们时，表单不会发布，因为字段是空的。因此，隐藏div并禁用输入。这有可能与jQuery？ TNX

Answer 1

尝试以下：

  $("input[type=radio]").change(function () {

   if ($('#Payment1').prop('checked')) {
      $('#PaymentContainer1').show();
  } else {
      $('#PaymentContainer1').hide();
   }

   if ($('#Payment2').prop('checked')) {
      $('#PaymentContainer2').show();
   } else {
      $('#PaymentContainer2').hide();
  }
});

$("#Payment2").prop("checked", true).trigger("change");

这是链接：http://jsfiddle.net/yauCs/5/

Answer 2

在name="payment"中添加radio，以便他们在click处理程序

之后充当群组并致电change

HTML

<input type="radio" name="payment" id="Payment1">Payment1
<input type="radio" name="payment" id="Payment2">Payment2
<div id="PaymentContainer1" style="display:none;">Payment 1 container</div>
<div id="PaymentContainer2" style="display:none;">Payment 2 container</div>

JS

$(document).change(function () {
    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});
$("#Payment1").click();

<强> jsFiddle

Answer 3

避免使用$(document).change()，因为您将监听DOM中每个元素的事件，on()允许动态添加元素并仍然有效。

$(document).on('change','input',function () {

    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});

$("#Payment1").prop("checked", true);

同时将收音机的名称设置为相同的名称，以确保只选择一个

fiddle

Answer 4

Dude，你为什么在文档上使用.change事件，当你在页面中进行其他更改时可能会出错。

更好地使用这个

$(document).ready(function () {

    $('input[type=radio]').change(function(){


    if ($('#Payment1').is(':checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').is(':checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
        });
});
$("#Payment1").prop("checked", true).change();

FIDDLE DEMO

你还有其他一些问题，在你的情况下，无线电被选中，理想情况下这不是问题。

$(document).ready(function () {
    $('input[type=radio]').change(function(){

    if ($('#Payment1').is(':checked')) {

        $('.containner').hide();
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').is(':checked')) {

        $('.containner').hide();
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
        });
});
$("#Payment1").prop("checked", true).change();

Perfect Radio Demo

Answer 5

在这段代码中犯了很少的错误，试试这个我希望这会完美无缺 $（document）.ready（function（）{$（“＃Payment1”）。attr（“checked”，true）;

if ($('#Payment1').prop('checked')) {
    $('#PaymentContainer1').show();
} else {
    $('#PaymentContainer1').hide();
}

if ($('#Payment2').prop('checked')) {
    $('#PaymentContainer2').show();
} else {
    $('#PaymentContainer2').hide();
}

}）;

jQuery show div on radio选择带自动检查无线电选项

5 个答案: