Modify the radio button's appearance by styling it upon clicking

Question

Modify the radio button's appearance by styling it upon clicking

I have designed an HTML structure to switch payment methods.

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

However, I am unsure how to achieve the following:

Ensure that the first input is always checked by default.
Allow users to click on the parent li tag to select the radio button.
Show the relevant .explainpaymethod when one payment method is selected, and hide the others.

Thank you for any assistance provided.

jquery html css

Answer 1

Answer №1

Ensure the first radio button is selected by utilizing the checked property within the initial input tag.
If you want to click on the parent li tag instead of the radio button, apply the display: block; property to the <label>.

Here is a way to incorporate all these properties:

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

Trust this information proves helpful!

Answer 2

Ensure the first radio button is selected by utilizing the checked property within the initial input tag.
If you want to click on the parent li tag instead of the radio button, apply the display: block; property to the <label>.

Here is a way to incorporate all these properties:

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

Trust this information proves helpful!

Answer 3

Answer №2

Always ensure the first input is checked.

To set the default selected option in HTML, utilize the checked attribute.

To check the radio, click on the parent tag li instead of the radio button itself.

Instead of adding a click event to the li, enclose both the input and text within a <label> element. This method enhances the clickable area for the radio button.

If one option is checked, display the .explainpaymethod; otherwise, hide it.

To accomplish this, you will need some JavaScript code. Hide all .explainpaymethod elements and only show the relevant one based on the changed radio button by utilizing DOM traversal techniques like closest() and find(). Here's an example:

$('#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 4

Always ensure the first input is checked.

To set the default selected option in HTML, utilize the checked attribute.

To check the radio, click on the parent tag li instead of the radio button itself.

Instead of adding a click event to the li, enclose both the input and text within a <label> element. This method enhances the clickable area for the radio button.

If one option is checked, display the .explainpaymethod; otherwise, hide it.

To accomplish this, you will need some JavaScript code. Hide all .explainpaymethod elements and only show the relevant one based on the changed radio button by utilizing DOM traversal techniques like closest() and find(). Here's an example:

$('#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 5

Answer №3

1) Ensure that the first "input" is always checked.

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

2) To select a radio button by clicking on its parent li tag, use the following:

You can achieve this by using <label for="parent_id">

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

3) When one radio button is selected, display the corresponding .explainpaymethod and hide others.

$('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 6

1) Ensure that the first "input" is always checked.

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

2) To select a radio button by clicking on its parent li tag, use the following:

You can achieve this by using <label for="parent_id">

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

3) When one radio button is selected, display the corresponding .explainpaymethod and hide others.

$('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 7

Answer №4

You can achieve this without the need for javascript.

Simply start by adding the checked attribute to the input that you want to be pre-selected by default.

Next, assign an "id" attribute to the inputs and a "for" attribute to the corresponding 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 include the following CSS code which will display the paragraph if its sibling input is checked.

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

You can access the fiddle using the following link: https://jsfiddle.net/u1zjyorf/3/

Answer 8

You can achieve this without the need for javascript.

Simply start by adding the checked attribute to the input that you want to be pre-selected by default.

Next, assign an "id" attribute to the inputs and a "for" attribute to the corresponding 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 include the following CSS code which will display the paragraph if its sibling input is checked.

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

You can access the fiddle using the following link: https://jsfiddle.net/u1zjyorf/3/

Modify the radio button's appearance by styling it upon clicking

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Activate the button click event using JavaScript or jQuery automatically when the page is loaded in Internet Explorer

What methods can be employed to prevent a custom CSS from overriding my personal styles?

Can someone help me troubleshoot the issue with my submit button's onclick function?

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

Removing an item from an array stored in jQuery using the .data() method

Employing JavaScript to insert a JSON value as a parameter in an HTML element's attribute

"Is there a way to implement the functions of adding, editing, and deleting data in

Contrasting $interval and setInterval functions in AngularJs

What is the best method to choose the following sentence once the final * has been identified

Attempting to iterate over a JSON object and display its contents using HTML

Using just a simple HTML code, the d-flex feature in Bootstrap seems to be malfunctioning

Calculating in PHP through AJAX Call

How can I apply column spacing specifically for both desktop and mobile devices using only Bootstrap 4?

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

NextJS compilation sometimes results in undefined errors when using Sass styles

Utilize CSS styling on dynamically loaded HTML content

Repurposing JavaScript objects after clearing their contents

Display a jQuery dialog box with options to confirm or cancel. Submit the form when the user clicks on

Angular: Ensuring Paypal button does not display twice without a hard reload

Angular 6 seems to be having issues loading Bootstrap