javascript - 如何使一组复选框互斥？

我必须选择相互排斥的复选框。我遇到了无数示例，给出了一个复选框组的示例。
一个示例是http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html。

就我而言，我在同一页面上有很多复选框组，因此我希望它像this example一样工作。
example is here背后的asp.net代码，但我想在客户端代码中完成。

如何在JavaScript中执行此操作？

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

最佳答案

有单选按钮时使用“相互复选框”是个坏主意，但您仍然可以按照以下步骤进行操作

的HTML

<div>
    Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="checkbox">
    Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="checkbox">
    Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="checkbox">
</div>

<div>
    Mango: <input id="chkRed" name="chkMango" type="checkbox" value="Mango" class="checkbox">
    Orange: <input id="chkBlue" name="chkOrange" type="checkbox" value="Orange" class="checkbox">
    Banana: <input id="chkGreen" name="chkBanana" type="checkbox" value="Banana" class="checkbox">
</div>

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

这是fiddle