по щелчку функции снимите флажок других радиокнопок

Question

Я дал код

<ul id="payment-method-fields"> 
    <li id="paypal"> 
    <label> 
     <input checked="checked" id="order_payments_attributes__payment_method_id_5" name="order[payments_attributes][][payment_method_id]" type="radio" value="5"> 
     Test Paypal 

    </label> 
    </li> 
    <li id="adyen"> 
    <label> 
     <input id="order_payments_attributes__payment_method_id_4" name="order[payments_attributes][][payment_method_id]" type="radio" value="4"> 
     Ali Pay 
    </label> 
    </li> 
    <li id="adyen_encrypted"> 
    <label> 
     <input id="order_payments_attributes__payment_method_id_16" name="order[payments_attributes][][payment_method_id]" type="radio" value="16"> 
     credit card 

    </label> 
    </li> 
    <li id="cod" > 
    <label> 
     <input id="cash-on-delivery" name="cod" type="radio" value=""> 
     Cash on Delivery 
    </label> 
    </li> 
</ul> 

мое требование, когда нажмите на другой Li т.е. на Наложенный платёж, то PayPal получает бесконтрольно. Пожалуйста, расскажите мне, как я напишу этот jquery.

Answer 1

Вы можете сделать это:

$('#cash-on-delivery').on('change', function(){ 
    $('input[name="order[payments_attributes][][payment_method_id]"]') 
                  .prop('checked', !this.checked); 
}); 

Answer 2

Просто дать им такое же имя для всех входных тегов Пример:

Это гарантирует, выбирается только один в любое время.

Answer 3

Последнее input имеет другое имя <input id="cash-on-delivery" name="cod" type="radio" value="">, чем другие, поэтому, когда вы его проверяете, другие не будут автоматически сняты. Дайте ему одно и то же имя, и оно будет работать нормально.

Работает с Example.

Код:

<ul id="payment-method-fields"> 
    <li id="paypal"> 
    <label> 
     <input checked="checked" id="order_payments_attributes__payment_method_id_5" name="order[payments_attributes][][payment_method_id]" type="radio" value="5"> 
     Test Paypal 

    </label> 
    </li> 
    <li id="adyen"> 
    <label> 
     <input id="order_payments_attributes__payment_method_id_4" name="order[payments_attributes][][payment_method_id]" type="radio" value="4"> 
     Ali Pay 
    </label> 
    </li> 
    <li id="adyen_encrypted"> 
    <label> 
     <input id="order_payments_attributes__payment_method_id_16" name="order[payments_attributes][][payment_method_id]" type="radio" value="16"> 
     credit card 

    </label> 
    </li> 
    <li id="cod" > 
    <label> 
     <input id="cash-on-delivery" name="order[payments_attributes][][payment_method_id]" type="radio" value=""> 
     Cash on Delivery 
    </label> 
    </li> 

</ul> 

Answer 4

Мое предложение:

 
$('#payment-method-fields :input[type="radio"]').on('change', function(e) { 
    if (this.id == 'cash-on-delivery') { 
     $('#payment-method-fields').find('input[type="radio"]:not(#' + this.id + ')').prop('checked', false); 
    } 
}); 

Answer 5

Чтобы проверить/снимите флажок, используйте атрибут проверить и изменить что , С помощью JQuery вы можете сделать:

//$('#myCheckbox').attr('checked', true); // Checks it 
    //$('#myCheckbox').attr('checked', false); // Unchecks it 

    $('#cash-on-delivery').on('change', function(){ 
    $('input[name="order[payments_attributes][][payment_method_id]"]').attr('checked',true); 
}); 

Answer 6

Вы можете дать все входы одинаковый класс, например

класс = "radio_button"

И тогда вы можете добавить код

$(document).ready(function(){ 
    $('.radio_button').on('click',function(){ 
     $('.radio_button').removeAttr('checked'); 
     $(this).prop('checked','checked'); 
    }) 
} 

Answer 7

Удаление свойство «проверено» от входных элементов с помощью функции jQuery removeProp. Для примера создать две функции и вызывать их в OnClick триггером ваших входных-элементов:

function uncheckTop3() { 
    $('#order_payments_attributes__payment_method_id_5').removeProp('checked'); 
    $('#order_payments_attributes__payment_method_id_4').removeProp('checked'); 
    $('#order_payments_attributes__payment_method_id_16').removeProp('checked'); 
} 

function uncheckCashOnDelivery() { 
    $('#cash-on-delivery').removeProp('checked'); 
} 

Здесь в jfiddle-link на вашем примере.