jQuery - Радиоуправление проверено

Question

У меня эти две кнопки. Я хочу сделать это, поэтому всякий раз, когда пользователь выбирает один, 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(); 
    } 
}); 

Я не могу получить эту работу. Ничего не происходит, когда переключатели переключаются.

Answer 1

На самом деле код ничего не может сделать, поскольку с помощью each вы выполняете итерирование по проверенному радио и настройке, в конечном счете, с его первым состоянием видимости; без какого-либо прослушивателя событий на вашем переключателе change события код не будет работать при изменении выбранного параметра радио.

Используйте событие изменение:

Описание: Привязывает обработчик события к событию «изменить» событие JavaScript, или вызывает данное событие на элемент.

Во-вторых, в вашем HTML нет payza идентификатор, но 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/

Answer 2

Примечание: ваш 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 3

Вы должны поместить все это под событие изменения ... Вид:

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

Вот некоторые лучше идея горячей, чтобы сделать это красиво и вскоре ... на Fiddle

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

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

Answer 4

С текущего кода вы не имеете любой слушатель события ожидая радиокнопку. Ваш код работает только при загрузке страницы. Вам просто нужно добавить прослушиватель событий, чтобы проверить радио кнопки, когда они нажали

Пример: 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() слушателя, она будет проверять для: проверяется состояние всегда, когда либо на радиоприемнике