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

On click function uncheck other radio buttons

本文关键字：其他 单选按钮 取消 功能 单击      更新时间：2023-09-26

我给出了代码

<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。

我的建议是：

$('#payment-method-fields ：input[type="radio"]'(.on('change'， function(e( {   如果 (this.id == '货到付款'( {      $('#payment-method-fields'(.find('input[type="radio"]：not(#' + this.id + '('(.prop('checked'， false(;   }});

你可以这样做： 

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

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

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

这可确保在任何时候只选择一个。

例如，

您可以为所有输入提供相同的类

类="radio_button">

然后你可以添加代码

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

最后一个input的名称<input id="cash-on-delivery" name="cod" type="radio" value="">与其他名称不同，因此当您选中它时，其他不会自动取消选中。给它相同的名称，它将正常工作。

这是它工作的示例。

法典：

<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>

使用 jQuery removeProp 函数从输入元素中删除属性 'checked'。对于您的示例，创建两个函数并在输入元素的 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链接。

要选中/取消选中复选框，请使用选中的属性并对其进行更改。使用 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);
});
相关文章：