javascript - 仅检查具有不同名称的 radio

Question

我的代码中有许多名称不同但具有 data-group-name 属性的 radio 输入。

一次只能为一个组选中一个单选按钮。

这是我的示例输入和 JS:

$('input[type="radio"]').change(function() {
  $(this).attr('checked', true).val("true");
  var groupName = $(this).attr('data-group-name');
  $('input[type="radio"][data-group-name="' + groupName + '"]').not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio21" name="Group[21].Value" value="true" type="radio">
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio22" name="Group[22].Value" value="true" type="radio">
<input checked="checked" class="custom-control-input ml-1 mr-1" data-group-name="23-group" id="radio23" name="Group[23].Value" value="true" type="radio">

但是，我仍然可以检查很多 radio 。

Answer 1

你的逻辑似乎工作正常，前提是你去掉它们的 checked="checked"以便它们适用于 "change"

$('input[type="radio"]').change(function() {
  $(this).attr('checked', true).val("true");
  var groupName = $(this).attr('data-group-name');
  $('input[type="radio"][data-group-name="' + groupName + '"]').not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio21" name="Group[21].Value" value="true" type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio22" name="Group[22].Value" value="true" type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="23-group" id="radio23" name="Group[23].Value" value="true" type="radio">