仅检查具有不同名称的收音机

Question

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

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

这是我的示例输入和 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">

但是，我仍然可以检查很多收音机。

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

Answer 2

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

<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"  type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="21-group" id="radio22" name="Group[22].Value"  type="radio">
<input class="custom-control-input ml-1 mr-1" data-group-name="23-group" id="radio23" name="Group[23].Value"  type="radio">

Answer 3

您应该将处理程序放在 click 事件上，而不是 change。如果该框已被选中，则单击它不会更改它，因此该事件永远不会触发。

$('input[type="radio"]').click(function() {
  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">

仅检查具有不同名称的收音机

Only one check for radios with different names

html

javascript

jquery

radio-group