允许仅一次选择复选框基或无

我有以下复选框：允许仅一次选择复选框基或无

<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); 
});

但这将所有的复选框为同一组，但我有两个组。

我该如何解决这个问题？

UPDATE

如果它很容易，我可以只使用一个类和数据组：

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

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

所以基本上我需要找到所有类=“唯一”的复选框，然后只允许在每个组中选择没有或一个复选框，组。

来源

2014-09-02 Miguel Moura

复选框应该有一个名称属性。另外，如果您希望它们像单选按钮那样工作，则使用单选按钮。用户在使用接口时需要一定的连续性。 – j08691 2014-09-02 20:29:40

对于'checked'，你应该使用'.prop（）'而不是'.attr（）' – DarkAjax 2014-09-02 20:31:25

我不能使用收音机，因为我需要允许用户不选择任何复选框... – 2014-09-02 20:32:34

我认为你正在寻找：

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

来源

2014-09-02 21:10:50

我试过你的代码，但选择复选框后，我不能取消选择它，除非我点击另一个...我需要能够取消选中一个复选框。 – 2014-09-02 21:44:31

已更新代码以允许取消选中复选框。 – 2014-09-02 21:48:44

对不起，但这是行不通的......现在我可以在同一组中选择许多复选框。我用你的代码创建了一个小提琴：http://jsfiddle.net/dekfq7zq/ – 2014-09-03 09:38:22

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

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); 
     } 
    }); 
});

来源

2014-09-02 21:09:44

以您的示例，我无法取消选择复选框，我需要做到这一点... – 2014-09-02 21:42:31

哎呀！是的，那只是广播功能。事实证明，这并不像我想的那样简单。给我几分钟，我想我可以修复它。 – 2014-09-02 22:14:30

我更新了小提琴。我不得不使用类来让它工作，所以它不是100％完美的imo。 – 2014-09-02 22:17:11

允许仅一次选择复选框基或无

回答

相关问题