我必须做出相互排斥的复选框。我遇到过很多例子，它们给出了一个复选框组的例子。 一个例子是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
基于交互复选框时，有单选按钮是一个坏主意，但你仍然可以做到这一点如下
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
查看我更新的[版本]（http://jsfiddle.net/3TssG/） – OnesimusUnbound
@OnesimusUnbound太好了。你的代码更简单。 –
并使用div输入顺序也不错。 – OnesimusUnbound
就像我在我的评论中说的，你应该真的使用<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的用户将能够选择所有选项（如果他们喜欢的话）。如果仍然觉得需要这样做，那么你需要给每个复选框组一个唯一的类名称。然后，处理每个复选框元素的更改事件，并取消选中与单击的元素具有相同类名称的所有其他元素。
我希望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'ed复选框工作正常。
更新
看着我的回答，我意识到这是多余的参考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" />
组所有相互排除的支票在含有元素箱
的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>
享受:-)
我想这是你想要的。
考虑下面的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
试试这个：
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。
无论您的网页上的复选框位于何处，您只需指定该组，然后在此处开始！
<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>
是否有一个特别的原因，你不想使用无线电元素呢？ –
相互排斥复选框----> Radiobuttons！ – Bazzz
aka Radiobuttons – John