jQuery 在带有自动检查单选选项的单选上显示 div答案

【问题标题】：jQuery show div on radio select with auto check radio optionjQuery 在带有自动检查单选选项的单选上显示 div
【发布时间】：2013-08-10 23:49:29
【问题描述】：

我正在使用 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可以做到这一点吗？天呐

【问题讨论】：

标签： jquery radio-button

【解决方案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/

【讨论】：

【解决方案2】：

老兄，你为什么要在文档上使用 .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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

在两个radio 中添加name="payment"，以便它们作为组并在change 处理程序之后调用click

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

【讨论】：

【解决方案5】：

这段代码中的错误很少，试试这个我希望这能完美运行 $(文档).ready(函数(){ $("#Payment1").attr("checked", true);

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

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

});

【讨论】：