如何使一组复选框互斥？答案

【问题标题】：How can I make a group of checkboxes mutually exclusive?如何使一组复选框互斥？
【发布时间】：2011-12-26 01:09:55
【问题描述】：

我必须制作互斥复选框。我遇到了许多例子，它们给出了一个复选框组的例子。一个例子是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

【问题讨论】：

您是否有什么特别的原因不想为此使用单选元素？
互斥复选框---->单选按钮！
Andy ..这就是要求...我很乐意使用单选按钮列表 :(..people cmon 请删除downvote ...某个地方的某个人肯定会遇到这个问题...应该已经和upvote ..:(
你应该回到客户那里，说他们违反了可用性规则。
与复选框相比，单选按钮的烦人之处在于，必须为每个分组创建“以上都不是”选项，这会带来其自身的可用性问题。如果意外选择了单选按钮，则用户必须搜索“以上选项均无”，因为没有其他方法可以取消选择。单选按钮和复选框之间确实需要一些东西。

标签： javascript jquery

【解决方案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

【讨论】：

【解决方案2】：

就像我在评论中所说的那样，您真的应该为此使用 <radio> 元素。给它们起相同的名字，它们的工作方式几乎相同：

<label><input type="radio" name="option" value="Option 1">Option 1</label>
<label><input type="radio" name="option" value="Option 2">Option 2</label>

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

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

【讨论】：

+1。如果他真的需要，他也可以修改它们在 JS 中的外观，使它们看起来像复选框（尽管我不确定这是一个好主意），参见。 stackoverflow.com/questions/279421/…。至于取消选中的行为，一种解决方法可能是提供一个带有默认（空？）值的单选按钮。
@Shutieh：是的，我也在考虑推荐样式单选元素，但很难以跨浏览器的方式实现。
单选按钮无用的一种可能情况是当您需要取消选中它们时
@Daniel：标准是有一个“无”单选选项。再说一次，我只是不认为曾经有充分的理由使用复选框和 javascript 来完成广播组的工作。

【解决方案3】：

我希望this 可以工作

HTML

A <input type="checkbox" class="alpha" value="A" /> | 
B <input type="checkbox" class="alpha" value="B" /> | 
C <input type="checkbox" class="alpha" value="C" /> 
<br />

1 <input type="checkbox" class="num" value="1" /> |
2 <input type="checkbox" class="num" value="2" /> |
3 <input type="checkbox" class="num" value="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 <input type="checkbox" name="alpha" value="A" /> | 
B <input type="checkbox" name="alpha" value="B" /> | 
C <input type="checkbox" name="alpha" value="C" /> 
<br />

1 <input type="checkbox" name="num" value="1" /> |
2 <input type="checkbox" name="num" value="2" /> |
3 <input type="checkbox" name="num" value="3" />

sample code

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

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

<div class="alpha">
A <input type="checkbox" value="A" /> | 
B <input type="checkbox" value="B" /> | 
C <input type="checkbox" value="C" /> 
</div>

<div class="num">
1 <input type="checkbox" value="1" /> |
2 <input type="checkbox" value="2" /> |
3 <input type="checkbox" value="3" /> 
</div>

sample code

享受:-)

【讨论】：

【解决方案4】：

试试这个：

HTML

<div>
    Car: <input id="chkVehicleCar" name="chkVehicle" type="checkbox" value="Car" class="radiocheckbox">
    Moto: <input id="chkVehicleMoto" name="chkVehicle" type="checkbox" value="Moto" class="radiocheckbox">
    Byke: <input id="chkVehicleByke" name="chkVehicle" type="checkbox" value="Byke" class="radiocheckbox">
    Feet: <input id="chkVehicleFeet" name="chkVehicle" type="checkbox" value="Feet">
</div>

<span>    
    Red: <input id="chkColorRed" name="chkColor" type="checkbox" value="Red" class="radiocheckbox">
    Blue: <input id="chkColorBlue" name="chkColor" type="checkbox" value="Blue" class="radiocheckbox">
    Green: <input id="chkColorGreen" name="chkColor" type="checkbox" value="Green" class="radiocheckbox">

    Mango: <input id="chkFruitMango" name="chkFruit" type="checkbox" value="Mango" class="radiocheckbox">
    Orange: <input id="chkFruitOrange" name="chkFruit" type="checkbox" value="Orange" class="radiocheckbox">
    Banana: <input id="chkFruitBanana" name="chkFruit" type="checkbox" value="Banana" class="radiocheckbox">
</span>

JavaScript/jQuery

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

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

【讨论】：

【解决方案5】：

我想这就是你想要的。

考虑下面的 HTML：

<form action="">
    My favourite colors are:<br />
    <br />
    <input type="checkbox" value="red" name="color" /> Red<br />
    <input type="checkbox" value="yellow" name="color" /> Yellow<br />
    <input type="checkbox" value="blue" name="color" /> Blue<br />
    <input type="checkbox" value="orange" name="color1" /> Orange<br />
    <input type="checkbox" value="green" name="color1" /> Green<br />
    <input type="checkbox" value="purple" name="color1" /> Purple
</form>

请注意，颜色组有两个名称：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 example

【讨论】：

【解决方案6】：

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

    <input type='checkbox' data-group='orderState'> pending
    <input type='checkbox' data-group='orderState'> solved
    <input type='checkbox' data-group='orderState'> timed out

    <input type='checkbox' data-group='sex'> male
    <input type='checkbox' data-group='sex'> female

    <input type='checkbox'> Isolated


    <script>
       $(document).ready(function () {
          $('input[type=checkbox]').click(function () {
            var state = $(this)[0].checked, 
                g = $(this).data('group');
             $(this).siblings()
             .each(function () {
     $(this)[0].checked = g==$(this).data('group')&&state ? false : $(this)[0].checked;
             });
  });
 })</script>

【讨论】：