2

I have 2 seperate fields with 4 radio buttons each.

Field nr1 has radio button unchecked by using jquery, field nr2 has the first radio button checked by default.

What i need is, if in field nr1 a radio button is checked, then it checks the same radio button in field nr2.

Here is how my html looks like:

<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field"><label for="billing_piegadatajs" class="">Piegādes veids <abbr class="required" title="vajadzīgs">*</abbr></label><br>

<input type="radio" name="billing_piegadatajs" value="Pasta Stacija" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Pasta Stacija</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="Kurjerdienests" class="radio" style="width:10%"><span for="billing_piegadatajs">Kurjerdienests</span><br>
<input type="radio" name="billing_piegadatajs" value="Saņemt uz vietas" class="radio" style="width:10%"><span for="billing_piegadatajs">Saņemt uz vietas ( Saldū )</span>
</p>

<br>        

<tr class="shipping">
<th>Piegādes izmaksas</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">Pasta Stacijas: <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 Kurjeris: <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">Uz vietas - Saldū (Bez maksas)</label>
        </li>
   </ul>



</td>
</tr>

I use this jquery to uncheck the field nr1 radio button when page is loaded.

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

Valdis
  • 41
  • 1
  • 6

4 Answers4

1

You can acheive this in many many ways

One approach should be considering 2 set of radio

you have 2 sets already :

the first one share the class name 'radio'

the second one share the class name 'shipping_method'

The logic

1) add a click event on all radio of the first set

2) Get the order rank of the one we click on

3) force a click event on the radio button having the same index in the second set

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

    // Get the element index , which one we click on
    var indx = jQuery(this).index('.radio');

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

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

there is the jsfiddle : http://jsfiddle.net/MMJRk/21/

Frederic Nault
  • 986
  • 9
  • 14
  • You sir are a life saved. I don't know why the first time i pasted your code it didn't work, but after re-pasting it, not everything work s! Thank you A LOT ! – Valdis Mar 12 '14 at 16:03
  • My solution force you to have the same order of click relation between the first set and the second. If you want more flexibility I suggest you to reade the answer of @OscarPaz, and the comment below it. Have a nice day! – Frederic Nault Mar 12 '14 at 16:06
0

First you need to find out which box is checked. The following link may help.

In jQuery, how do I select an element by its name attribute?

Then you need to loop through the next check boxes, comparing the value to the value you want for each box. When you find the one you want. Check that one. Link for how to check box.

How to check a radio button with jQuery ?

Community
  • 1
  • 1
RDuncan
  • 21
  • 1
0

Well, i have to admit it is not the most ideal way of getting what you want. But it does the trick: 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);
    });

In short, when a radiobutton changes in p.form-row it will get the index of the clicked radiobutton and it will set the radiobutton in the second list of radiobuttons to checked.

Barry Meijer
  • 760
  • 4
  • 16
  • For some reason your code does not work on my site. It works in jsfiddle, but when i pasted it on my site, it didnt. Frederic Nault script worked. But that you very much for the help, i really appreciate it. – Valdis Mar 12 '14 at 16:05
0

I've updated your jsfiddle and now it works.

Basically, I assigned to each input (and its counterpart), an index using custom data attributes (data-index). I attached an event handler to the first group of inputs, and, based on the index of the checked one, I check the correct radiobutton in the second group:

$('#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);
});
Oscar Paz
  • 18,084
  • 3
  • 27
  • 42
  • Why adding data-index when jquery can find the index? – Frederic Nault Mar 12 '14 at 15:51
  • Well, for starters, it's quicker, as yo know the index of the radiobutton immediately. Secondly, this way you don't depend on their order. What if you want to arrange the radibuttons in the second group differently? Besides, with my way it would be very easy to change a one-to-one relationship to a one-to-many (if you change radiobuttons for checkboxes). – Oscar Paz Mar 12 '14 at 15:55
  • Great answer, Your way give few advantage, Im totally agree on these benefit. I guess the extra data-index make it more flexible. Thank you – Frederic Nault Mar 12 '14 at 16:01
  • I know. I'm completely devoted to custom attributes, they make the code less imperative and more declarative. – Oscar Paz Mar 12 '14 at 16:04
  • For some reason your code does not work on my site. It works in jsfiddle, but when i pasted it on my site, it didnt. Frederic Nault script worked tho. Except, that yeah, when field nr2 is changed, it does not change field1. works only field1 to field2. – Valdis Mar 12 '14 at 16:08
  • I didn't i thought this script does it. How can i do it please? – Valdis Mar 12 '14 at 16:16
  • Add a data-index attribute with the same value to each input and its counterpart, to make them related: `data-index="0"`, `data-index="1"` and so on. The script does not do it, because this way you can change the relationship between the radioubuttons in a declarative way (without touching code). – Oscar Paz Mar 12 '14 at 16:25