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

Question

I am trying to pre-select premium delivery by default. I was looking on the web and really don't understand why it would not pre-select the second radio-box. Please find link to my JSfiddle

My code is also:

 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> 

Answer 1

It is because the first radio box has checked="check" . Move that to the second radio box to make it work. No need for JavaScript. See this updated fiddle: http://jsfiddle.net/n5h65n73/

Or, if you really need to do it with JavaScript:

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

Answer 2

The issue is within your HTML. You have the checked="checked" attribute set on the first radio input. So if you remove that attribute and move it to the second one, it'll work as you want.

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

To do this using jQuery, here's the code snippet:

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

The basic explanation is that you are using the attr method of jQuery to modify the property (ie, the first argument) with the desired value (ie, the second argument). And then necessity for both lines of code is to remove the first checked before setting the second one.

Does that help?