如何使用 jQuery 设置（“检查”）具有相同类的所有单选按钮

Posted 2023-03-27

【中文标题】如何使用 jQuery 设置（“检查”）具有相同类的所有单选按钮

【英文标题】：How to set ("check") all radio buttons with identical classes using jQuery

【发布时间】：2017-09-18 16:00:46

【问题描述】：

我希望使用 jQuery 设置所有单选按钮。我的 jQuery 只设置组中的最后一个。

HTML

<p class="navbar-text navbar-right" style="margin:-4px 0 0 0">
<input id="serviceProximity-07-1" name="serviceProximity" type="radio" value="1"><label for="serviceProximity-07-1" style="color:#fff;padding-left:0.5em;padding-right:2.0em">In-Area (Svc Group)</label>
<input id="serviceProximity-07-0" name="serviceProximity" type="radio" value="0"><label for="serviceProximity-07-0" style="color:#fff;padding-left:0.5em;padding-right:2.0em">Out-of-Area (Svc Group)</label>
<input id="serviceProximity-07-X" name="serviceProximity" type="radio" value="X"><label for="serviceProximity-07-2" style="color:#fff;padding-left:0.5em;padding-right:2.0em">Clear (Svc Group)</label>
</p>


<tbody>

<tr>
<th scope="row">V1</th>
<td>Description 1</td>
<td><input class="07-1" id="locationProximity-129-1" name="locationProximity" type="radio" value="1"> <label for="locationProximity-129-1">In-Area</label></td>
<td><input class="07-0" id="locationProximity-129-0" name="locationProximity" type="radio" value="0"> <label for="locationProximity-129-0">Out-of-Area</label></td>
</tr>

<tr>
<th scope="row">S1</th>
<td>Description 2</td>
<td><input class="07-1" id="locationProximity-234-1" name="locationProximity" type="radio" value="1"> <label for="locationProximity-234-1">In-Area</label></td>
<td><input class="07-0" id="locationProximity-234-0" name="locationProximity" type="radio" value="0"> <label for="locationProximity-234-0">Out-of-Area</label></td>
</tr>

</tbody>

JavaScript/jQuery

<script>

  $( "input[name='serviceProximity']" ).on( 'change', function() 
    //console.log( 'serviceProximity Changed!' );
    //console.log( $(this).val() );
    //console.log( $(this).attr('id') );
    var arr = $(this).attr('id').split('-');
    //console.log( arr[1] );
    //console.log( arr[2] );
    if( arr[2] == '1' ) $( '.' + arr[1] + '-1' ).prop( 'checked', true ); // ONLY SETS LAST ITEM IN THE STACK
    else if( arr[2] == '0' ) $( '.' + arr[1] + '-0' ).prop( 'checked', true ); // ONLY SETS LAST ITEM IN THE STACK
    else 
       $( '.' + arr[1] + '-1' ).prop( 'checked', false ); // THIS WORKS BUT NOT SURE IF IT IS ONLY CLEARING LAST ITEM IN STACK DUE TO ISSUE ABOVE
       $( '.' + arr[1] + '-0' ).prop( 'checked', false ); // THIS WORKS BUT NOT SURE IF IT IS ONLY CLEARING LAST ITEM IN STACK DUE TO ISSUE ABOVE
    
  );

</script>

目标是根据serviceProximity中的检查检查所有“区域内”，根据serviceProximity中的检查检查所有“区域外”，并清除选中 Clear 时进行所有检查。

修改：

尝试在目标类前面加上“sg-”，以防 javascript/jquery 不喜欢以数字开头的类，但这并没有起到作用。

Started a fiddle

【问题讨论】：

您应该考虑在您的 html 中使用 data- 属性来处理您的匹配，而不是将数据编码到您的 id 中。让您更轻松地找出您想要的部分。

一次只能选择 1 个单选按钮。如果您希望能够选择多个，它们需要是复选框。

嗯，不清楚你的评论@blackandorangecat。你是说没有办法使用 jQuery 自动检查一系列单选按钮？

@H.Ferrence 正确。根据定义，单选按钮只允许每个“组”中的一个为selected。因为它们都具有相同的名称 (locationProximity)，所以一次只能选择 1 个。

是的...做到了@blackandorangecat .. 完全是“我的错”。

【参考方案1】：

您必须更改单选按钮组的name 属性，因为在任何时候都只能选择一组同名单选按钮中的一个单选按钮。在这种情况下是最后一个，因为 prop 是在最后一个更改的。

<tr>
  <th scope="row">V1</th>
  <td>Description 1</td>
  <td><input class="07-1" id="locationProximity-129-1" name="locationProximity1" type="radio" value="1"> <label for="locationProximity-129-1">In-Area</label></td>
  <td><input class="07-0" id="locationProximity-129-0" name="locationProximity1" type="radio" value="0"> <label for="locationProximity-129-0">Out-of-Area</label></td>
</tr>

<tr>
  <th scope="row">S1</th>
  <td>Description 2</td>
  <td><input class="07-1" id="locationProximity-234-1" name="locationProximity2" type="radio" value="1"> <label for="locationProximity-234-1">In-Area</label></td>
  <td><input class="07-0" id="locationProximity-234-0" name="locationProximity2" type="radio" value="0"> <label for="locationProximity-234-0">Out-of-Area</label></td>
</tr>