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

时间:2016-04-12 22:17:25

标签: javascript jquery html radio-button

我正在尝试默认预先选择优质投放。我在网上看,真的不明白为什么不预先选择第二个收音机。请找到my 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>

2 个答案:

答案 0 :(得分:0)

这是因为第一个电台盒有checked="check"。将其移动到第二个单选框以使其工作。不需要JavaScript。请参阅此更新的小提琴:http://jsfiddle.net/n5h65n73/

或者,如果您真的需要使用JavaScript:

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

答案 1 :(得分:0)

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

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

要使用jQuery执行此操作,请参阅以下代码段:

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

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

这有帮助吗?