JQuery выбрать множественный вход радио с динамическим именем

Question

У меня есть набор радио групп следующим образом:

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

... 

В принципе у меня есть Подгруппа набора переключателей. Я хочу назначить всем переключателям значение заголовка группы. Например, если пользователь устанавливает значение 2 в группе опций под названием «SI2», все группы, начиная с «2S» должен иметь значение 2.

Я пытался использовать '*=' и '~=' селектор, который я получил от прибегая к помощи , но ничего не получилось.

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

Это не работает для самого 1-й селектор (имя, содержащее SI), Тогда я изменить следующим образом:

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

я сделал выше в цикле, который имеет section_index в качестве контроля переменной, здесь работает 1-й селектор (точное совпадение имен), но следующее не указано (имя содержит section_index).

Я согласен изменить имена групп, если это помогает.

Пожалуйста, обратите внимание, что я новичок в jquery, поэтому, пожалуйста, простите, если я пропустил что-то очень очевидное.

Answer 1

Таким образом, проблема заключается не только в выборе переключателей, но и в программной проверке.

=~ селектор работает только для содержащего слова (через пробел) В этом случае *= или ^= будет работать для селектора.

Для проверки выбранных переключателей необходимо использовать функцию prop. Также необходимо вызвать change(), чтобы немедленно отразить изменение.

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

Answer 2

Итак, вы хотите настроить таргетинг на все ваши кнопки «SI ...»; для этого вам нужно найти все радиокнопки, которые начинаются с «SI». Селектор для «начинается с» является «=»:

$('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); 
}); 

Так input[type=radio][name^=SI] находит все радиокнопки, чье имя начинается с «СИ», и 'input[type=radio][name^='+target_name_prefix+']' найти те, которые начинаются с «S» (т.е. 0S, 1S , 2S)

Надеюсь, что это поможет!