如何使一组复选框互斥？ [英] How can I make a group of checkboxes mutually exclusive?

问题描述

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

I have to make mutually exculsive checkboxes. I have come across numerous examples that do it giving example of one checkbox group. One example is at http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html.

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

In my case, I have many checkbox groups on the same page, so I want it to work like this example. An asp.net codebehind example is here, but I want to do it in client side code.

如何在JavaScript中执行此操作？

How can I do this in JavaScript?

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

i have decided to use the ajax mutually exclusive checkbox extender. The solutions given so far are basically based on radio buttons. This link really helped me..http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender

推荐答案

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

Using Mutual Checkboxes when there is Radio button is a bad idea but still you can do this as follows

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

这里是小提琴

这篇关于如何使一组复选框互斥？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！