只检查具有不同名称的收音机答案

【问题标题】：Only one check for radios with different names只检查具有不同名称的收音机
【发布时间】：2018-07-23 18:00:31
【问题描述】：

我的代码中有许多具有不同名称但具有 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">

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

【问题讨论】：

没有必要使用.attr('checked', true)。该属性仅用于初始默认值，不需要更新。

标签： javascript jquery html radio-group

【解决方案1】：

您的逻辑似乎可以正常工作，前提是您将 checked="checked" 去掉，以便它们适用于“更改”

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

【讨论】：

【解决方案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">

【讨论】：

【解决方案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">

【讨论】：