0

我有这两个单选按钮。我想这样做，所以每当用户选择一个时，jQuery 应该显示div具有该按钮内容的那个。示例#paypal有一个div被叫#mydivpaypal和#payza有一个div被叫#mydivpayza。

每当用户点击时#paypal，我只想#mydivpaypal显示。与#payza.

HTML：

<ul class="payment-methods" id="pmethods" style="margin-left:320px;">
  <li class="payment-method paypal">
    <input name="payment_methods" type="radio" id="paypal">
    <label for="paypal">PayPal</label>
  </li> 
  <li class="payment-method payza">
    <input name="payment_methods" type="radio" id="pagseguro">
    <label for="pagseguro">PagSeguro</label>
  </li>
</ul>

jQuery：

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

我不能让它工作。选中单选按钮时没有任何反应。

4

4 回答 4

0

您必须将其全部放在更改事件下...种类：

$('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/

于 2013-09-30T08:00:16.310 回答
0

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

示例：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 状态

于 2013-09-30T08:01:24.547 回答
0

注意： 你second radio id是pagseguro不是payza

试试看，

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

小提琴

于 2013-09-30T07:58:55.897 回答
0

实际上代码不能做任何事情，因为each你正在迭代检查的收音机并最终设置它的第一个可见性状态；如果您的单选按钮事件没有任何事件侦听器，change则当您更改选定的单选选项时，代码将不会运行。

使用事件变化：

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

第二个在您的 HTML 中没有payzaid but 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/

于 2013-09-30T08:07:03.813 回答