需求其实很简单，就是实现多checkbox的互斥选中，看下面图：AAA和BBB和CCC不能同时选中，当然这个里面可以定义其他规则，CCC和EEE不能同时选中，DDD和EEE不能同时选中。同时选中的时候要进行提示，那几个冲突了，并且将冲突去掉。
不说了，直接上代码，效果图如上，欢迎大家PK。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
function clickCallBack(e){
var rule = [["0","1","4"],["2","4"],["3","4"]];
var ruleLabel = [["AAA","BBB","EEE"],["CCC","EEE"],["DDD","EEE"]];
if(!checkCan(rule,ruleLabel)){
e.checked =false;
}
}
function contains(obj,a) {
var i = a.length;
while (i--) {
if (a[i] == obj) {
return true;
}
}
return false;
}
function checkCan(rule,ruleLabel){
var checkedVals = new Array();
jQuery("input[name=test]:checked").each(function(){
checkedVals.push($(this).val());
});
jQuery.each(rule,function(index){
var ruleItem = $(this);
var flag =0;
for(i=0;i<ruleItem.length;i++){
if(contains(ruleItem[i], checkedVals)){
flag++;
}
}
if(flag>=ruleItem.length) {
var ruleLabelItem = ruleLabel[index];
var promote = "";
var labelSize = ruleLabelItem.length;
for(i=0;i<labelSize;i++){
if(i < labelSize - 1){
promote += "'" + ruleLabelItem[i] + "'同";
} else {
promote += "'" + ruleLabelItem[i] + "'";
}
}
alert(promote+"是互斥的,不能同时选中!");
return false;
}
});
return true;
}
</script>
<title>Insert title here</title>
</head>
<body>
<input type="checkbox" name="test" value="0" onclick="clickCallBack(this)"/>AAA
<input type="checkbox" name="test" value="1" onclick="clickCallBack(this)"/>BBB
<input type="checkbox" name="test" value="2" onclick="clickCallBack(this)"/>CCC
<input type="checkbox" name="test" value="3" onclick="clickCallBack(this)"/>DDD
<input type="checkbox" name="test" value="4" onclick="clickCallBack(this)"/>EEE
<input type="checkbox" name="test" value="5" onclick="clickCallBack(this)"/>FFF
<input type="checkbox" name="test" value="6" onclick="clickCallBack(this)"/>GGG
<input type="checkbox" name="test" value="7" onclick="clickCallBack(this)"/>HHH
</body>
</html>
- 大小: 27.3 KB
分享到：
相关推荐
本文实例讲述了JS实现checkbox互斥(单选)功能。分享给大家供大家参考，具体如下： <html xmlns=http://www.w3.org/1999/xhtml > <head> <title>www.jb51.net CheckBox单选</title> ...
- 如果多个CheckBox有互斥关系，使用Radio Button而非CheckBox。 - 使用有意义的文本标签，解释每个CheckBox的作用。 综上所述，“CheckBox是否选中”不仅是获取用户输入的基本操作，还涉及到事件驱动编程的关键...
在给定的代码示例中，我们可以看到一个简单的实现方式，它主要用于实现一个单选菜单，使得用户点击某一个选项时，只有被选中的选项保持高亮状态，其他选项则取消高亮。 首先，我们来看一下模板部分（）： ```html ...
例如，我们可以使用相同的`name`属性值来确保同一组内的Checkbox互斥，这样每次只能有一个Checkbox被选中。在JavaScript中，我们可以监听Checkbox的改变事件，取消其他同组Checkbox的选中状态。 在多选场景下，用户...
七、实现互斥的checkbox组 有时，我们希望一组checkbox中只能选中一个。这可以通过监听`change`事件，并取消其他checkbox的选中状态来实现： ```javascript var exclusiveGroup = document.querySelectorAll('....
例如，通过JavaScript，我们可以实现Checkbox的批量选择（全选/全不选）、互斥选择（一组中只能选一个）等功能。同时，JavaScript还可以监听Checkbox的状态变化，触发相应的事件处理函数，如更新页面的其他部分，...
同时，控制器还需要处理Checkbox间的互斥关系，确保在一组单选框中只有一个被选中。 在实际开发中，可能会遇到以下挑战： - **响应式设计**：为了适配不同尺寸的屏幕和设备，需要确保Checkbox的布局和大小能够自动...
描述中提到的“实现checkbox(多项选择)和radio button(单项选择)功能”，意味着这个“超强TreeView”控件能够同时支持这两种选择模式。这在实际应用中非常有用，例如在配置界面中，用户可以选择一组相关的设置，或者...
- **属性**：与`checkbox`相似，`name`属性用于确保同一组内的`radio`按钮互斥，`value`表示选中项的值。 - **互斥性**：通过设置相同的`name`属性，可以确保同一组内的`radio`按钮只有一个被选中。 - **...
这个实例涉及到如何在`QTreeView`中实现带有复选框的节点，特别是主节点支持三态复选框功能。在QT中，这种功能可以通过自定义模型和视图来实现，以满足特定的用户交互需求。 首先，我们需要理解`QTreeView`的工作...
本示例项目“单选多选以及单选互斥.rar”着重介绍了如何在Android应用中实现简单的单选、多选以及单选互斥功能。下面将详细解析这些知识点。 **1. 单选按钮（RadioButton）** 单选按钮通常用于提供一组互斥的选项，...
这通常用于实现层次结构中的互斥选择。 3. **鼠标右键菜单**： 鼠标右键菜单是在用户点击鼠标右键时弹出的功能菜单，可以提供额外的操作选项。在xLoadTree中，通过添加鼠标右键菜单，用户可以直接在树形视图中进行...
如果需要一组互斥的复选框，可以使用`Ext.container.CheckboxGroup`，它允许用户从一组选项中选择一个。配置`columns`属性可以设置每行显示的复选框数量。 8. **响应式设计** 在移动设备上，复选框的布局可能需要...
例如，我们可以设定一组互斥的复选框，只能选中其中一个： ```javascript var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i ; i++) { checkboxes[i].addEventListener('...
Checkbox则允许用户多选，我们同样可以使用`.prop()`或`.attr()`来检查或取消选中，使用`.is()`检查是否已被选中。 1. **设置Checkbox选中状态**： ```javascript $('input[type="checkbox"]').prop('checked', ...
本示例"小程序多选弹窗-可互斥效果.rar"聚焦于如何利用checkbox组件实现一个具有互斥功能的多选弹窗，这样的功能常用于让用户在多个选项中进行有限的选择，例如设置偏好、选择服务等。下面我们将详细探讨这一主题。 ...
3. **group**: 可以通过设置相同的group名，使多个CheckBox之间具有互斥性，即一次只能有一个CheckBox处于选中状态。 4. **on_active**: 这是一个回调函数，当CheckBox的active状态改变时会被触发，参数是新状态...
默认情况下，`Checkbox`通常显示一个空心方框，被选中时填充为实心。而`RadioButton`，即单选按钮，用于让用户在一组互斥的选项中选择一个。默认图标是一个未被选中的小圆圈，被选中时变为实心。 要改变`Checkbox`...
RadioGroup会处理内部RadioButton之间的互斥逻辑，确保每次只有一个按钮处于选中状态。在XML布局文件中，可以通过`<RadioButton>`标签创建单选按钮，并通过`android:checkedButton`属性指定默认选中的按钮。此外，还...