jquery select 具有动态名称的多个单选输入

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>

...

基本上我有一个单选按钮集的子组。我想为所有单选按钮分配组 header 的值。例如，如果用户在名为 'SI2' 的选项组中设置值 2，则所有以“2S”开头的组都应具有值 2.

我尝试使用通过谷歌搜索获得的 '*=' 和 '~=' 选择器，但没有任何效果。

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

这对第一个选择器本身不起作用（名称包含 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 作为控制变量的循环中执行了上述操作，在这里，第一个选择器起作用（名称完全匹配）但下一个不起作用（名称包含 section_index） .

如果有帮助，我可以更改组的命名。

请考虑到我是 jquery 的新手，所以如果我错过了一些非常明显的东西，请原谅。

Answer 1

所以您想定位所有 "SI..." 单选按钮；为此，您需要找到所有 start 和 "SI" 的单选按钮。 "starts with" 的选择器是 "^=":

$('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] 查找名称以 "SI" 开头的所有单选按钮，而 'input[type=radio][name^='+target_name_prefix+']' 将查找名称以 "S" 开头的单选按钮（即 0S、1S、2S）

希望对您有所帮助！

Answer 2

所以问题不仅在于选择单选按钮，还在于以编程方式检查它。

=~ 选择器仅适用于包含单词（由 space 分隔）在这种情况下，*= 或 ^= 将适用于选择器。

要查看选中的单选按钮，需要使用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/

jquery select 具有动态名称的多个单选输入

jquery select multiple radio input with dynamic name

jquery

contains

radio-group

jquery-selectors

radio-button