如何使一组复选框互斥？

我必须制作相互冲动的复选框。 我遇到过很多例子，它给出了一个复选框组的例子。 一个例子是http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html 。

在我的情况下，我在同一页面上有许多复选框组，所以我希望它像这个例子一样工作。 这里有一个asp.net代码隐藏示例 ，但我想在客户端代码中执行此操作。

我怎么能用JavaScript做到这一点？

我决定使用ajax互斥复选框扩展器。 到目前为止给出的解决方案基本上是基于单选按钮。 这个链接真的帮了我.. http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender

Answer 1

当有单选按钮时使用Mutual Checkbox是一个坏主意但仍然可以按如下方式执行此操作

HTML

 Red:  Blue:  Green:  
 
 Mango:  Orange:  Banana:   

jQuery的

 $('div .checkbox').click(function () { checkedState = $(this).attr('checked'); $(this).parent('div').children('.checkbox:checked').each(function () { $(this).attr('checked', false); }); $(this).attr('checked', checkedState); }); 

这里是小提琴

Answer 2

就像我在评论中说的那样，你应该真正使用元素。 给他们相同的名字，他们的工作方式几乎相同：

 Option 1 Option 2 

唯一重要的区别是，一旦选择其中一个，其中至少有一个必须打开（即，您不能再次取消选中它们）。

如果您真的觉得需要使用复选框，请提醒自己禁用JavaScript的用户可以选择所有选项。 如果您仍然觉得有必要这样做，那么您需要为每个复选框组指定一个唯一的类名。 然后，处理每个复选框元素的change事件，并取消选中与所单击的元素匹配相同类名的所有其他元素。

Answer 3

试试这个：

HTML

 
 Car:  Moto:  Byke:  Feet:  
  Red:  Blue:  Green:  Mango:  Orange:  Banana:   

的JavaScript / jQuery的

 $(':checkbox.radiocheckbox').click(function() { this.checked && $(this).siblings('input[name="' + this.name + '"]:checked.' + this.className) .prop('checked', false); });​ 

互斥复选框按容器+名称+类名分组。 您可以在同一容器中使用不同的组，也可以将具有相同名称的非独占复选框混合使用。 JavaScript代码经过高度优化。 你可以看到一个有效的例子 。

Answer 4

我希望这个会奏效

HTML

 A  | B  | C  
 1  | 2  | 3  

JavaScript的

 // include jQuery library var enforeMutualExcludedCheckBox = function(group){ return function() { var isChecked= $(this).prop("checked"); $(group).prop("checked", false); $(this).prop("checked", isChecked); } }; $(".alpha").click(enforeMutualExcludedCheckBox(".alpha")); $(".num").click(enforeMutualExcludedCheckBox(".num")); 

好吧，单选按钮应该是在相互排除的选项中使用的单选按钮，虽然我遇到了一个场景，客户端喜欢零到一个选定的项目，并且javaScript的复选框工作正常。

更新

看看我的回答，我意识到两次引用css类是多余的。 我更新了我的代码以将其转换为jquery插件，并根据一个首选项创建了两个解决方案

获取互相排除检查的所有复选框

 $.fn.mutuallyExcludedCheckBoxes = function(){ var $checkboxes = this; // refers to selected checkboxes $checkboxes.click(function() { var $this = $(this), isChecked = $this.prop("checked"); $checkboxes.prop("checked", false); $this.prop("checked", isChecked); }); }; // more elegant, just invoke the plugin $("[name=alpha]").mutuallyExcludedCheckBoxes(); $("[name=num]").mutuallyExcludedCheckBoxes(); 

HTML

 A  | B  | C  
 1  | 2  | 3  

示例代码

将所有相互排除的复选框分组到包含元素中

JavaScript的

 $.fn.mutuallyExcludedCheckBoxes = function(){ var $checkboxes = this.find("input[type=checkbox]"); $checkboxes.click(function() { var $this = $(this), isChecked = $this.prop("checked"); $checkboxes.prop("checked", false); $this.prop("checked", isChecked); }); }; // select the containing element, then trigger the plugin // to set all checkboxes in the containing element mutually // excluded $(".alpha").mutuallyExcludedCheckBoxes(); $(".num").mutuallyExcludedCheckBoxes(); 

HTML

 
 A  | B  | C  
 
 1  | 2  | 3   

示例代码

请享用 ：-）

Answer 5

我想这就是你想要的。

考虑下面的HTML ：

 
 My favourite colors are:
 
  Red
  Yellow
  Blue
  Orange
  Green
  Purple  

请注意，颜色组有两个名称： red, yellow, blue和orage, green, purple

下面提到的这个JavaScript通常适用于页面上的所有checkbox 。

 jQuery("input[type=checkbox]").unbind("click"); jQuery("input[type=checkbox]").each(function(index, value) { var checkbox = jQuery(value); checkbox.bind("click", function () { var check = checkbox.attr("checked"); jQuery("input[name=" + checkbox.attr('name') + "]").prop("checked", false); checkbox.attr("checked", check); }); }); 

看看这个LIVE示例

Answer 6

无论您的页面上的复选框位于何处，您只需指定组即可！

   pending  solved  timed out  male  female  Isolated