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

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

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

Answer 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的用户可以根据需要选择所有选项。如果仍然认为需要这样做，那么您需要为每个复选框组指定一个唯一的类名。然后，处理每个checkbox元素的change事件，并取消选中与所单击元素匹配相同类名的所有其他元素。

Answer 3

试试这个：

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。

Answer 4

我希望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

享受： - ）

Answer 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

Answer 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>

如何使一组复选框互斥？

6 个答案: