默认情况下无法预先选择所需的单选框

Not being able to pre-select desired radio box by default

本文关键字：单选框 选择 情况下 默认      更新时间：2024-05-31

我正在尝试默认情况下预先选择高级交付。我在网上看，真的不明白为什么它不预先选择第二个广播箱。请找到我的JSfiddle 链接

我的代码也是：

jQuery(document).ready(function() {
  waitForDelayedContent('#checkout-shipping-method-load .input-checkout-radio .method-title:contains(Take it to my room)', function() {
    jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC) .method-title:contains(Take it to my room)').click();
    jQuery('#checkout-shipping-method-load .input-checkout-radio:not(.mtC):has(.method-title:contains(Take it to my room)) .radio').click();
    jQuery('#checkout-shipping-method-load .input-checkout-radio:has(.method-title:contains(Take it to my room))').addClass('mtC');
  });
});
<div id="checkout-shipping-method-load">
  <div class="sp-methods">
    <h3 class="title">Delivery Option</h3>
    <p>You must select a delivery option.</p>
    <ul>
      <li class="delivery-method">
        <div class="input-checkout-radio">
          <input checked="checked" class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
          <label class="radio-label" for="s_method_standard"><span class="radio"></span>  <span class="method-title">FREE Take it to
                    my door</span>
          </label>
        </div>
      </li>
      <li class="delivery-method">
        <div class="input-checkout-radio">
          <input class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
          <label class="radio-label" for="s_method_premium"><span class="radio"></span>  <span class="method-title"><span class=
                    "price"><span class="currency">£</span>39</span>Take it to my room</span>
          </label>
        </div>
      </li>
    </ul>
  </div>
</div>

这是因为第一个无线电盒子有checked="check"。把它移到第二个无线电盒子上，让它工作。不需要JavaScript。查看此更新的小提琴：http://jsfiddle.net/n5h65n73/

或者，如果你真的需要使用JavaScript：

$("#s_method_premium").prop("checked", true)

问题在HTML中。在第一个无线电输入上设置了checked="checked"属性。因此，如果您删除该属性并将其移动到第二个属性，它将按您的意愿工作。

<div id="checkout-shipping-method-load">
    <div class="sp-methods">
        <h3 class="title">Delivery Option</h3>
        <p>You must select a delivery option.</p>
        <ul>
            <li class="delivery-method">
                <div class="input-checkout-radio">
                    <input class="input-radio" id="s_method_standard" name="shipping_method" type="radio" value="paragon_customrate_standard">
                    <label class="radio-label" for="s_method_standard"><span class="radio"></span> <span class="method-title">FREE Take it to
                    my door</span>
                    </label>
                </div>
            </li>
            <li class="delivery-method">
                <div class="input-checkout-radio">
                    <input checked class="input-radio" id="s_method_premium" name="shipping_method" type="radio" value="paragon_customrate_premium">
                    <label class="radio-label" for="s_method_premium"><span class="radio"></span> <span class="method-title"><span class=
                    "price"><span class="currency">£</span>39</span>Take it to my room</span>
                    </label>
                </div>

要使用jQuery实现这一点，以下是代码片段：

$('#s_method_premium').attr('checked', 'true');

基本的解释是，您使用jQuery的attr方法来修改具有所需值（即第二个参数）的属性（即第一个参数）。然后，两行代码的必要性是在设置第二行代码之前删除第一行检查的代码。

这有帮助吗？

相关文章：