Question

我有这两个单选按钮。我想这样做，所以每当用户选择一个，那么jQuery应该显示具有该按钮内容的div。示例#paypal的{{1}}名为div，#mydivpaypal的{{1}}名为#payza。

每当用户点击div时，我只想显示#mydivpayza。与#paypal一样。

HTML：

#mydivpaypal

jQuery的：

#payza

我无法让这个工作。选中单选按钮时没有任何反应。

Answer 1

注意：您的second radio id pagseguro 不是 payza

试试吧，

$('input#paypal').on('click',function() {
    $("#mydivpayza").hide();
    $("#mydivpaypal").show();     
});
$('input#pagseguro').on('click',function() {
    $("#mydivpaypal").hide();
    $("#mydivpayza").show();
});

Fiddle

Answer 2

你必须把它全部置于变化事件之下......种类：

$('input[name=payment_methods]').change(function(){
    if($('#paypal').is(':checked')) { 
        $("#mydivpaypal").show();
    }
    if($('#payza').is(':checked')) { 
        $("#mydivpaypal").hide();
        $("#mydivpayza").show();
    }
})

这是一个更好的想法，很好地做到很快，很快...在小提琴

   $('.payment-method input').change(function(){
        $('#'+this.id+'_div').show().siblings().hide()
    })

http://jsfiddle.net/acrashik/Nt7nS/

Answer 3

使用当前代码，您没有任何事件侦听器等待单击单选按钮。您的代码仅在加载页面时运行。您只需要添加一个事件监听器，以便在单击时检查单选按钮

示例：http://jsfiddle.net/adambotley/2h8vW/

$(document).ready(function(){

    var boxes = $('input:checked');
    $(boxes).click( function(){ 
        $(boxes).each(function() {
           if($('#paypal').is(':checked')) { 
            $("#mydivpaypal").show();
            }
           if($('#payza').is(':checked')) { 
            $("#mydivpaypal").hide();
               $("#mydivpayza").show();
            }
        });
});

通过添加.click（）侦听器，只要单击任一无线电，它就会检查：checked状态

Answer 4

实际上代码无法执行任何操作，因为使用each迭代已检查的无线电并最终设置其第一个可见性状态;如果您没有任何事件监听单选按钮change事件，则更改所选的单选选项时代码将无法运行。

使用活动更改：

描述：将事件处理程序绑定到“更改”JavaScript事件，或在元素上触发该事件。

HTML中的第二个没有payza ID但是pagseguro，并且记得根据当前检查的无线电来隐藏/显示div。

代码：

$('input[name=payment_methods]').change(function () {
    if ($('#paypal').is(':checked')) {
        $("#mydivpayza").hide();
        $("#mydivpaypal").show();
    }
    if ($('#pagseguro').is(':checked')) {
        $("#mydivpaypal").hide();
        $("#mydivpayza").show();
    }
});

演示：http://jsfiddle.net/IrvinDominin/NVsPj/

jQuery - 选中单选按钮

4 个答案: