CODEWITHSUNDEEP
jqueryjquery-selectorsradio-buttoncontainsradio-group
Dipto
Dipto

Reputation: 2738

jquery select multiple radio input with dynamic name

I have a set of radio groups as follow:

<INPUT TYPE='radio' NAME='SI1' VALUE='0'>Y</br>
<INPUT TYPE='radio' NAME='SI1' VALUE='1'>N</br>
<INPUT TYPE='radio' NAME='SI1' VALUE='2'>NA</br>

<INPUT TYPE='radio' NAME='1S1' VALUE='0'>group1</br>
<INPUT TYPE='radio' NAME='1S1' VALUE='1'>group2</br>
<INPUT TYPE='radio' NAME='1S1' VALUE='2'>group3</br>

<INPUT TYPE='radio' NAME='1S2' VALUE='0'>group1</br>
<INPUT TYPE='radio' NAME='1S2' VALUE='1'>group2</br>
<INPUT TYPE='radio' NAME='1S2' VALUE='2'>group3</br>

<INPUT TYPE='radio' NAME='SI2' VALUE='0'>Y</br>
<INPUT TYPE='radio' NAME='SI2' VALUE='1'>N</br>
<INPUT TYPE='radio' NAME='SI2' VALUE='2'>NA</br>

<INPUT TYPE='radio' NAME='2S1' VALUE='0'>group1</br>
<INPUT TYPE='radio' NAME='2S1' VALUE='1'>group2</br>
<INPUT TYPE='radio' NAME='2S1' VALUE='2'>group3</br>

<INPUT TYPE='radio' NAME='2S2' VALUE='0'>group1</br>
<INPUT TYPE='radio' NAME='2S2' VALUE='1'>group2</br>
<INPUT TYPE='radio' NAME='2S2' VALUE='2'>group3</br>

<INPUT TYPE='radio' NAME='2S3' VALUE='0'>group1</br>
<INPUT TYPE='radio' NAME='2S3' VALUE='1'>group2</br>
<INPUT TYPE='radio' NAME='2S3' VALUE='2'>group3</br>

...

Basically I have a sub group of a radio button set. I want to assign all of the radio buttons the value of the group header. For example, if the user sets value 2 in option group named 'SI2', all the groups starting with '2S' should have value 2.

I tried to use the '*=' and '~=' selector, which I got from googling, but nothing worked.

$('input[type=radio][name~=SI]').change(function() {
     var names = section_index+'S';
     $('input[type=radio][name*='+names+']').value=this.value;
});

This does not work for the 1st selector itself ( name containing SI), Then I changed to the following:

$('input[type=radio][name=SI'+section_index+']').change(function() {
    var names = section_index+'S';
    $('input[type=radio][name*='+names+']').value=this.value;
});

I did the above in a loop which has section_index as controlling variable, here, the 1st selector works (name exact match) but the next one does not (name containing the section_index).

I am OK to change the naming of the groups if that helps.

Please consider that I am new to jquery, so please pardon if I missed something very obvious.

Upvotes: 0

Views: 2527

Answers (2)

Dipto
Dipto

Reputation: 2738

So the problem is not only with selecting the radio buttons, but also programatically checking it.

=~ selector only works for containing word (separated by space) In this case *= or ^= will work for the selector.

To check the selected radio buttons, need to use the prop function. Also change() should be called to reflect the change immediately.

$('input[type=radio][name^="SI"]').change(function() {
    var names = this.name.substring(2)+'S'
    $('input[type=radio][name*='+names+'][value='+this.value+']').prop('checked',true).change();
});

https://jsfiddle.net/7h71kdab/1/

Upvotes: 1

nibnut
nibnut

Reputation: 3127

So you want to target all your "SI..." radio buttons; for that, you need to find all radio buttons that start with "SI". The selector for "starts with" is "^=":

$('input[type=radio][name^=SI]').change(function() {
    var header_radio_clicked = $(this);
    var value = header_radio_clicked.val();
    var target_name_prefix = value + "S";
    $('input[type=radio][name^='+target_name_prefix+']').val(value);
});

So input[type=radio][name^=SI] finds all radio buttons whose name starts with "SI", and 'input[type=radio][name^='+target_name_prefix+']' will find those that start with "S" (i.e. 0S, 1S, 2S)

Hope this helps!

Upvotes: 1

Related Questions