Learn how to automatically set the checked state of a radio button by toggling another radio button

Question

Learn how to automatically set the checked state of a radio button by toggling another radio button

I have two sets of radio buttons, each with four options.

The first set has no default selection (unchecked) using jQuery, while the second set has the first option checked by default.

What I'm looking to achieve is that when a radio button in the first set is checked, it should automatically check the corresponding one in the second set.

Here's the HTML structure:

<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field"><label for="billing_piegadatajs" class="">Delivery Method <abbr class="required" title="required">*</abbr></label><br>

<input type="radio" name="billing_piegadatajs" value="Post Office" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Post Office</span><br>
<input type="radio" name="billing_piegadatajs" value="Post24" class="radio" style="width:10%"><span for="billing_piegadatajs">Post 24</span><br>
<input type="radio" name="billing_piegadatajs" value="Courier Service" class="radio" style="width:10%"><span for="billing_piegadatajs">Courier Service</span><br>
<input type="radio" name="billing_piegadatajs" value="Pickup" class="radio" style="width:10%"><span for="billing_piegadatajs">Pickup (Location: Saldū)</span>
</p>

<br>        

<tr class="shipping">
<th>Shipping Costs</th>
<td>
    <ul id="shipping_method">
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method">
            <label for="shipping_method_0_flat_rate">Post Office: <span class="amount">€&nbsp;3.50</span></label>
        </li>
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_international_delivery" value="international_delivery" class="shipping_method">
            <label for="shipping_method_0_international_delivery">Post 24: <span class="amount">€&nbsp;3.50</span></label>
        </li>
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_apg_shipping" value="apg_shipping" class="shipping_method">
            <label for="shipping_method_0_apg_shipping">DLW Courier: <span class="amount">€&nbsp;9.00</span></label>
        </li>
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method">
            <label for="shipping_method_0_local_pickup">On-site Pickup - Saldū (Free)</label>
        </li>
   </ul>
</td>

</tr>

I am using this jQuery script to uncheck the radio buttons in the first set when the page loads:

jQuery(document).ready(function(){
jQuery('#billing_piegadatajs_field')
jQuery('#billing_piegadatajs_field').find('input[name="billing_piegadatajs"]').each(function() {
jQuery(this).prop('checked', false);
});
});

Here is a link to jsfiddle

javascript jquery html css

Answer 1

Answer №1

There are numerous ways to accomplish this task.

One method involves utilizing two sets of radio buttons.

You currently have two sets:

The first set shares the class name 'radio.'

The second set shares the class name 'shipping_method.'

Here is the logic:

1) Add a click event to all radio buttons in the first set.

2) Determine the order rank of the clicked radio button.

3) Trigger a click event on the radio button in the second set with the same index.

// Track the click on the first set of radio
jQuery('.radio').on('click',function(){

    // Get the element index of the clicked radio button
    var indx = jQuery(this).index('.radio');

    // Trigger a click event on the radio button at the same index in the second set

    jQuery('.shipping_method')[indx].click();
})

Here is the link to the jsfiddle: http://jsfiddle.net/MMJRk/21/

Answer 2

There are numerous ways to accomplish this task.

One method involves utilizing two sets of radio buttons.

You currently have two sets:

The first set shares the class name 'radio.'

The second set shares the class name 'shipping_method.'

Here is the logic:

1) Add a click event to all radio buttons in the first set.

2) Determine the order rank of the clicked radio button.

3) Trigger a click event on the radio button in the second set with the same index.

// Track the click on the first set of radio
jQuery('.radio').on('click',function(){

    // Get the element index of the clicked radio button
    var indx = jQuery(this).index('.radio');

    // Trigger a click event on the radio button at the same index in the second set

    jQuery('.shipping_method')[indx].click();
})

Here is the link to the jsfiddle: http://jsfiddle.net/MMJRk/21/

Answer 3

Answer №2

To determine which checkbox is selected, start by identifying the checked box. This helpful link provides guidance on this in jQuery. Next, iterate through the remaining checkboxes, comparing their values to the desired value for each. Once you find the correct one, mark it as checked. Refer to this resource for information on how to check a checkbox using jQuery.

Answer 4

To determine which checkbox is selected, start by identifying the checked box. This helpful link provides guidance on this in jQuery. Next, iterate through the remaining checkboxes, comparing their values to the desired value for each. Once you find the correct one, mark it as checked. Refer to this resource for information on how to check a checkbox using jQuery.

Answer 5

Answer №3

Although unconventional, this method gets the job done: http://jsfiddle.net/veritas87/MMJRk/25/

jQuery('p.form-row input[type=radio]').on('change', function () {
        var radioNumber = $(this).index('.radio');
        $("ul#shipping_method input[type=radio]:eq(" + radioNumber + ")").prop('checked', true);
    });

To simplify, when a radiobutton in p.form-row changes, it will select and check the corresponding radiobutton in the second list.

Answer 6

Although unconventional, this method gets the job done: http://jsfiddle.net/veritas87/MMJRk/25/

jQuery('p.form-row input[type=radio]').on('change', function () {
        var radioNumber = $(this).index('.radio');
        $("ul#shipping_method input[type=radio]:eq(" + radioNumber + ")").prop('checked', true);
    });

To simplify, when a radiobutton in p.form-row changes, it will select and check the corresponding radiobutton in the second list.

Answer 7

Answer №4

Your jsfiddle has been successfully updated and is now functioning correctly.

To make this work, I utilized custom data attributes (data-index) to assign an index to each input and its corresponding element. An event handler was then attached to the first set of inputs, which checks the relevant radio button in the second set based on the index of the selected input:

$('#billing_piegadatajs_field input[type="radio"]').on('change', function() {
   if (!this.checked) return;
   var index = this.getAttribute('data-index');
   $('#shipping_method input[data-index="' + index + '"]').prop('checked', true);
});

Answer 8

Your jsfiddle has been successfully updated and is now functioning correctly.

To make this work, I utilized custom data attributes (data-index) to assign an index to each input and its corresponding element. An event handler was then attached to the first set of inputs, which checks the relevant radio button in the second set based on the index of the selected input:

$('#billing_piegadatajs_field input[type="radio"]').on('change', function() {
   if (!this.checked) return;
   var index = this.getAttribute('data-index');
   $('#shipping_method input[data-index="' + index + '"]').prop('checked', true);
});

Learn how to automatically set the checked state of a radio button by toggling another radio button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What could be the reason for my failing express test?

Uploading and previewing multiple images on a canvas

Automated line wrapping within a div

Tips for ensuring a consistent highlight for an active link in Bootstrap

"Figuring out a way to include a link with each image in a react-s

The announcement will not be made as a result of the utilization of a private name

Sending a string via jQuery AJAX to an MVC controller results in a null parameter issue

Centering all td elements except for those with a specific class

Alter certain terms in HTML and update background using JavaScript

Tips for populating class attributes from an Angular model

ExpressJS route handler encounters an error due to undefined 'this' reference

Discover the position of a chosen element using jQuery

Is it possible to update the content page without having to refresh the master page?

I am experiencing difficulties in accessing the DOM

Following the submission of the ajax form, the page is reloading unexpectedly

Leveraging jquery to retrieve the value of a selected element

Let's discuss how to include the scrollTop option

The d3.js Time Scale Chart is facing issues when rendering with Array object values, unlike static values which render the chart perfectly

Maintain position:relative while adding child elements to the div

What is the best way to replace a CSS Background that is already marked as important?