分组全选
项目中有时候会遇到分组一对多的单选/反选的需求
这里是整理的一份常用的方法,算是分享/整理下
<html>
<head>
<title>关于分组全选</title>
<script type="text/javascript">
function window_load(){
}
function form_submit(){
return false;
}
function chkParent(pid,cNum){
for(var i=1;i<=cNum;i++){
document.getElementById(pid+"_"+i).checked=document.getElementById(pid).checked;
}
}
function chk_click(cid,pid,cNum){
//if(document.getElementById(cid).checked){
// document.getElementById(pid).checked=true;
//}else{
var flag=false;
for(var i=1;i<=cNum;i++){
if( document.getElementById(pid+"_"+i).checked){
flag=true;
break;
}
}
document.getElementById(pid).checked=flag;
//}
}
</script>
</head>
<body onload="window_load();">
<form id="f" action="05_function.html" onsubmit="return form_submit();" >
<ol>
<li>当父节点选中，其下子节点全部选中</li>
<li>当子节点存在选中，父节点必选中</li>
<li>当子节点全不选中，父节点不选中</li>
</ol>
<table border=1 width=50%>
<tr>
<td><input name="parent" type="checkbox" onclick="chkParent('a',4);" id="a">a<br></td>
<td>
<input name="child" type="checkbox" onclick="chk_click('a_1','a',4);" id="a_1" >a_1<br>
<input name="child" type="checkbox" onclick="chk_click('a_2','a',4);" id="a_2" >a_2<br>
<input name="child" type="checkbox" onclick="chk_click('a_3','a',4);" id="a_3" >a_3<br>
<input name="child" type="checkbox" onclick="chk_click('a_4','a',4);" id="a_4" >a_4<br>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="submit" id="btnSub" value="提交">
</td>
</tr>
</form>
</body>
</html>
分享到：
相关推荐
在学习和实现Vue多级复杂列表的展开/折叠及全选/分组全选功能时，我们需要关注一些关键技术和实现方法。首先，我们要了解如何构建数据结构，这是展示列表的基础。然后，我们需要掌握如何通过数据驱动的方式初始化...
在上述代码中，`this.checked`代表主复选框的当前状态，将其赋值给每个子复选框，实现了全选/全不选。 反选功能则需要将所有子复选框的选中状态与主复选框的当前状态相反。这可以通过遍历子复选框并切换它们的`...
### Flex DataGrid Checkbox 全选/反选知识点详解 #### 一、概述 Flex DataGrid 控件是Adobe Flex框架中的一个重要组成部分，它提供了一个灵活的方式来展示数据列表，并且支持多种功能，如排序、分组、筛选等。在...
在Android应用开发中，"案桌折叠菜单"通常指的是实现类似物理书本折叠效果的菜单设计，这种设计能够提供一种动态、交互性强的用户界面。它通常被用于导航或者显示多级分类信息，使得用户可以方便地探索和访问应用...
首先，让我们来理解全选/取消全选功能的基本逻辑。全选功能是指在一组复选框中，点击一个“全选”复选框，将会使得这组中的所有复选框状态被选中；而取消全选则是相反的操作，点击“全选”复选框后，将取消所有复选...
// 全选/取消全选 updateSelectedCountText(adapter.getSelectedItems().size()); // 更新选中数量显示 } }); private void updateSelectedCountText(int count) { TextView selectedCountText = findViewById...
- 集成Ajax，使得全选/反选操作无需刷新整个页面即可完成。 8. **测试和调试** 在开发过程中，确保对各种场景进行充分的测试，包括全选、反选、部分选中以及在数据动态加载或更新后的情况。 综上所述，"checkbox...
这里我们使用`<input type="checkbox">`作为全选/全不选的控制： ```html 全选</label> ``` 接下来，我们可以使用jQuery或其他JavaScript库编写事件处理函数，监听全选框的改变，然后遍历所有的select选项，根据...
实现全选/全不选功能，通常需要一个主控复选框，当它被选中时，所有关联的子复选框都被选中。可以使用JavaScript事件监听器（如`addEventListener`）来实现这个功能： ```javascript const allCheckbox = ...
5. **全选/全取消**：为了实现全选和全取消选中的功能，可以添加两个按钮或图标，绑定对应的事件处理器。在处理器中，遍历树的所有节点，通过`setChecked(true)`或`setChecked(false)`方法设置所有节点的复选状态。 ...
总的来说，“带全选的ExpandableListView”项目是Android开发中对`ExpandableListView`功能的扩展，它增加了全选功能，提高了用户在处理分组数据时的操作便捷性。实现这个功能涉及到Android的事件监听、数据绑定、UI...
3. **全选/反选实现**：添加一个复选框到DataGrid的Header，添加事件监听器来处理全选和反选操作。 4. **分页实现**：配置数据源的分页属性，并设置DataGrid的Paging属性。 5. **导出Excel**：在后端代码中实现数据...
3. **局部全选**：局部全选通常出现在有分组或分类的商品列表中。例如，购物车可能包含不同类别的商品，用户可能只想全选某个类别的商品。在这种情况下，为每个类别提供一个全选按钮，可以实现这个需求。前端需要...
面包车 可能是最强大的RecyclerView框架 ...特色 简洁代码 功能全面 非侵入式 不创建任何文件 刷新不闪屏 数据双向绑定（DataBinding） ...选择模式（多选/单选/全选/取消全选/反选） 拖拽位置 侧滑删除 拖动
在Flex开发中，DataGrid组件是...通过自定义列类、监听CheckBox事件和处理全选/全反逻辑，我们可以创建一个功能完善的多选DataGrid。在实际项目中，还可以根据需求进行更复杂的定制，比如添加分组、过滤和排序等功能。
4. **多组单选**：如果存在多个互不相关的单选组，每组都需要独立设置`name`属性，以实现分组单选。 5. **无障碍访问（A11y）**：确保添加了适当的无障碍属性，如`aria-label`或`aria-checked`，以便屏幕阅读器用户...
首先，`checkbox`全选功能的核心在于实现一个主`checkbox`（通常命名为“全选”或“全选/全不选”），当用户点击这个主`checkbox`时，所有子`checkbox`的状态都会随之改变。这种功能在表格、列表和其他需要多选操作...
然而，当页面上存在大量复选框时，为了提升用户体验，常常会引入一个“全选/全不选”的功能，允许用户一次性选择或取消选择所有的复选框。本文将详细介绍如何使用JavaScript来实现这样的功能。 首先，要实现全选...
6. **自定义组件**: 如果需要更复杂的行为，如分组或条件选择，可能需要自定义Datagrid列或扩展Datagrid组件本身，以实现特定的全选逻辑。 7. **测试与调试**: 完成功能后，必须进行全面的测试，确保全选功能在各种...