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，即Cash on Delivery，然后paypal取消选中。请指导我如何写这个jquery。

Answer 1

我的建议是：

$('#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 2

只需为所有输入标签指定相同的名称即可例如：

<input type="radio" name="group_name" />

这确保了任何时候都只选择了一个。

Answer 3

你可以这样做：

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

Answer 4

最后一个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 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

删除财产＆＃39;已检查＆＃39;来自带有jQuery removeProp函数的input-elements。对于您的示例，创建两个函数并在input-elements的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。

点击功能取消选中其他单选按钮

7 个答案: