Question

我有以下复选框：

<input type='checkbox' value='1' class='unique group1'>
<input type='checkbox' value='2' class='unique group1'>

<input type='checkbox' value='1' class='unique group2'>
<input type='checkbox' value='2' class='unique group2'>

我只需要选中一个复选框（作为单选按钮）或者也不需要选中复选框。

我正在尝试以下JQuery代码：

$('input.unique').click(function() {
    $unique.removeAttr('checked');
    $(this).prop('checked', true);
});

但是这会将所有复选框视为同一组，但我有两组。

我该如何解决这个问题？

更新

如果它变得容易，我只能使用一个类和数据组：

<input type='checkbox' value='1' class='unique' data-group='group1'>
<input type='checkbox' value='2' class='unique' data-group='group1'>

<input type='checkbox' value='1' class='unique' data-group='group2'>
<input type='checkbox' value='2' class='unique' data-group='group2'>

我没有使用名称来选择组的原因是因为这是由服务器端代码呈现的，并且所有名称都不同......

所以基本上我需要找到所有带有class =“unique”的复选框，然后只允许在每个组中选择一个或一个复选框，由data-group给出。

Answer 1

我认为您正在寻找：

$('input.unique').click(function() {
  if (!$(this).prop('checked'))
  {
    return;
  }
  var group = $(this).data('group');
  if (group)
  {
    $('input[data-group="' + group + '"]:checked').prop('checked', false);
    $(this).prop('checked', true);
  }
});

Working JsFiddle Example

Answer 2

你几乎拥有它。您所需要的只是选择正确的输入：

groupName = $(this).data('group');
$('input[data-group="' + groupName + '"]').removeAttr('checked');

这是一个小提琴：http://jsfiddle.net/qor1r0a4/

这最终比我预期的要复杂一些。事实证明，如果以编程方式检查它，jQuery无法检测是否选中了复选框。但是，您可以使用类来解决此问题，但它并不优雅：

$(function() {
    $('input.unique').click(function(e) {

        needsCheck = !$(this).hasClass('checked');

        $('input[data-group="' + $(this).data('group') + '"]')
            .removeAttr('checked')
            .removeClass('checked');

        if (needsCheck) {
            $(this).addClass('checked').prop('checked', true);
        } 
    });
});

允许复选框组仅选择一次或不选择

2 个答案: