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

Question

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

就我而言，同一页面上有许多复选框组，所以我希望它像 this example 一样工作。 。一个 asp.net 代码隐藏 example is here ，但我想在客户端代码中执行此操作。

如何在 JavaScript 中执行此操作？

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

Answer 1

当有单选按钮时使用相互复选框是一个坏主意，但您仍然可以按如下方式执行此操作

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