更改单选按钮并单击以设置其样式

Question

I have created HTML for changing payment method.

<ul id="checkout-method">
    <li><input name="payment_method" type="radio" value="Cash on Delivery">
        <label>Cash on Delivery</label>
        <p class="explainpaymethod" style="display:none">Pay with cash upon delivery.</p>
    </li>
    <li><input name="payment_method" type="radio" value="Paypal">
        <label>Paypal</label>
        <p class="explainpaymethod" style="display:none">Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>
    </li>
</ul>

But I do not know how to do :

• Always make first input is checked.

• Click on li parent tag to check radio instead of radio button.

• If one is check, .explainpaymethod will show, other is hide.

Thank you very much.

Answer 1

• To make the first radio checked, use checked property in the first input tag.

• To be able to click on li parent tag, check radio instead, use display: block; property on <label>

You can achieve all your properties like this:

 $(document).ready(function(){ $("input[type='radio']").on('click', function(e) { $('p.explainpaymethod').hide(); if($(this).is(':checked')) { $(this).closest('li').find('p.explainpaymethod').show(); } }) }); 

 label { display: block; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="checkout-method"> <li><label><input name="payment_method" type="radio" value="Cash on Delivery" checked> Cash on Delivery</label> <p class="explainpaymethod" style="display:inline-block">[Pay with cash upon delivery.]</p> </li> <li><label><input name="payment_method" type="radio" value="Paypal"> Paypal</label> <p class="explainpaymethod" style="display:none">[Pay via PayPal; you can pay with your credit card if you don't have a PayPal account.]</p> </li> </ul> 

Hope this helps!

Answer 2

Always make first input is checked.

Use the checked attribute in the HTML to set the default selected option.

Click on li parent tag to check radio instead of radio button.

Don't add the click on the li , instead wrap the input and the text in the <label> element. This is a standard control which expands the hit area for the radio button.

If one is checked, .explainpaymethod will show, other is hide.

You will need some JS to do this. You need to hide all the .explainpaymethod elements before showing the one related to the changed radio button by using DOM traversal techniques. Specifically closest() and find() . Try this:

 $('#checkout-method input').change(function() { $('.explainpaymethod').hide(); $(this).closest('li').find('.explainpaymethod').show(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="checkout-method"> <li> <label> <input name="payment_method" type="radio" value="Cash on Delivery" checked="true"> Cash on Delivery </label> <p class="explainpaymethod">Pay with cash upon delivery.</p> </li> <li> <label> <input name="payment_method" type="radio" value="Paypal"> Paypal </label> <p class="explainpaymethod" style="display:none">Pay via PayPal; you can pay with your credit card if you don't have a PayPal account.</p> </li> </ul> 

Answer 3

1)Always make first "input" is checked.

$('input[type="radio"]').eq(0).prop('checked',true);

2)Click on li parent tag to check radio instead of radio button.

You need to use <label for="parent_id">

<label for="Paypal">Paypal</label>

3)If one is check, .explainpaymethod will show, other is hide.

$('input[type="radio"]').change(function() {
   $('.explainpaymethod').hide();
   $(this).closest('li').find('.explainpaymethod').show();
});

 $('input[type="radio"]').eq(0).prop('checked',true); $('input[type="radio"]').eq(0).closest('li').find('.explainpaymethod').show(); $('input[type="radio"]').change(function() { $('.explainpaymethod').hide(); $(this).closest('li').find('.explainpaymethod').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="checkout-method"> <li><input name="payment_method" type="radio" value="Cash on Delivery" id="Cash"> <label for="Cash">Cash on Delivery</label> <p class="explainpaymethod" style="display:none">Pay with cash upon delivery.</p> </li> <li><input name="payment_method" type="radio" value="Paypal" id="Paypal"> <label for="Paypal">Paypal</label> <p class="explainpaymethod" style="display:none">Pay via PayPal; you can pay with your credit card if you don't have a PayPal account.</p> </li> </ul> 

Answer 4

You can do it without javascript.

First add checked attribute to the input which you want to be checked by default.

Then add "id" attribute to the inputs and "for" attribute to the labels.

<ul id="checkout-method">
    <li><input name="payment_method" type="radio" checked value="Cash on Delivery" id="cod">
        <label for="cod">Cash on Delivery</label>
        <br>
        <p class="explainpaymethod">Pay with cash upon delivery.</p>
    </li>
    <li><input name="payment_method" type="radio" value="Paypal" id="pp">
        <label for="pp">Paypal</label>
        <br>
        <p class="explainpaymethod">Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>
    </li>
</ul>

Then add the following CSS which shows paragraph if their sibling input is checked.

.explainpaymethod {
  display: none;
}
input:checked ~ .explainpaymethod {
  display: inline-block;
}

Here is the link to the fiddle: https://jsfiddle.net/u1zjyorf/3/