`

CheckBox 如何实现全选

阅读更多

在一个表单中有很多CheckBox,请问如何实现选种一个而让所有的都选中? 
--------------------------------------------------------------- 

function selectAll(checkBoxName){ 
var elms = document.getElementsByName(checkBoxName); 
if (elms.length<1) return; 
var allChecked = true; 
for (var i=0;i<elms.length;i++) 
if (elms[i].type=="checkbox") 
allChecked &= elms[i].checked; 
for (var i=0;i<elms.length;i++) 
if (elms[i].type=="checkbox"){ 
elms[i].checked = !allChecked; 
if (elms[i].onclick) elms[i].onclick(); 
} 
} 
--------------------------------------------------------------- 

<input type=checkbox name=m><input type=checkbox name=m><input type=checkbox name=m><input type=checkbox name=m> 
<input type=checkbox name=m><input type=checkbox name=m><input type=checkbox name=m><input type=checkbox name=m> 
全选<input type=checkbox value="Check All" onclick="mm(this)"> 

<script language=javascript> 
function mm(o) 
{ 
var a = document.getElementsByName("m"); 
for (var i=0; i<a.length; i++){ 
a[i].checked = o.checked; 
} 

} 
</script> 


<input type=checkbox name=chk> 
<input type=checkbox name=chk> 
<input type=checkbox name=chk> 
<input type=checkbox name=chk> 
<input type=checkbox name=chk> 
<br> 
全选:<input type=checkbox onclick=sel('chk')> 
<script language="javascript"> 
function sel(a){ 
o=document.getElementsByName(a) 
for(i=0;i<o.length;i++) 
o[i].checked=event.srcElement.checked 
} 
</script> 


分享到:
评论

相关推荐

    checkbox实现全选和反选经典例子

    这可以通过监听全选Checkbox的`CheckedChanged`事件来实现,然后遍历DataGridView的所有行,设置每一行的Checkbox为与全选Checkbox状态一致。 - **反选功能**:反选意味着取消所有已选中的项。这可以通过再次触发...

    DataGridView表头添加checkbox实现全选反选

    当我们需要在数据表中实现多选功能时,通常会在表头添加一个`Checkbox`,以实现全选或反选所有行的功能。这个过程涉及到事件处理、控件交互以及UI设计等多个方面的知识点。 首先,我们需要在`DataGridView`的表头行...

    高仿京东购物车listview_checkbox实现全选

    在Android应用开发中,"高仿京东购物车listview_checkbox实现全选" 是一个常见的功能需求,尤其是在构建电商类应用程序时。这个标题所指的示例项目,旨在演示如何使用ListView和CheckBox组件来创建一个类似京东、...

    checkbox的全选与取消

    全选功能通常是通过一个主复选框来实现的,当用户点击这个主复选框时,所有相关的子复选框会被自动选中或取消。这需要用到JavaScript或者jQuery来实现交互逻辑。例如,我们可以添加一个主复选框并监听其`change`事件...

    在DataGrid中使用CheckBox,实现全选功能

    这篇博客“在DataGrid中使用CheckBox,实现全选功能”详细介绍了如何实现这一需求。 首先,我们需要在DataGrid的列定义中添加一个CheckBox列。在WPF中,可以使用DataGridTemplateColumn来自定义列模板,将CheckBox...

    VB.NET为DataGridView添加CheckBox实现全选全不选复选框

    Datagridview控件没有全选或取消全选的复选框,本资源用VB2015通过扩展DataGridViewColumnHeaderCell类,在列头绘制一个复选框checkbox控件,通过定义checkbox鼠标单击事件来实现行的全选或取消全选。checkbox还可以...

    flex datagrid 嵌套checkbox实现全选

    本示例关注的是在DataGrid中嵌套复选框(Checkbox),并实现全选功能。这在需要用户批量选择或操作数据的场景中非常常见。以下是对这个主题的详细讲解: 1. **Flex DataGrid组件**: Flex DataGrid是Adobe Flex...

    s遍历页面中所有的checkbox实现全选功能

    ### 实现全选功能的方法:遍历页面中的所有 Checkbox 在网页开发中,尤其是在涉及到表单操作时,Checkbox(复选框)是非常常见的一种元素。它通常被用于收集用户的选择偏好,例如允许用户选择多个选项。为了提升...

    WPF-DataGrid中CheckBox实现全选与非全选

    在实际应用中,我们经常需要在`DataGrid`中添加复选框(CheckBox)来实现行级别的选择功能,同时提供全选和非全选的功能。这个功能不仅方便用户批量操作,也为应用提供了更好的交互性。本教程将详细讲解如何在`WPF ...

    jquery 一个checkbox控制全选与反选

    页面上通过一个checkbox实现全选与反选

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    Checkbox全选问题

    HtML javascritp checkbox 全选HtML javascritp checkbox 全选

    JS checkbox实现全选与取消功能完整代码

    1、选中全选按钮,下面的所有按钮都会被选中; 2、取消选中全选按钮,下面的所有按钮也会被取消选中; 3、其他按钮全部被选中,全选按钮也跟着被选中; 4、其他按钮只要有一个没有被选中,全选按钮也不会被选中。

    vue+elementui实现下拉框增加checkbox并可全选或取消(完整案例及效果图).zip

    在这个特定的案例中,我们关注的是如何使用Element UI来实现一个带有复选框(checkbox)的下拉框(select),并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先,我们需要在项目...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    vue使用vant中的checkbox实现全选功能

    本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码,供大家参考,具体内容如下 (item, key=index&gt; class=listli &gt; &lt;p&gt;{{ item.name

    DevExpress 实现checkbox全选效果.rar

    在提供的RAR文件"DevExpress 实现checkbox全选效果"中,可能包含了实现这个功能的代码示例。这些示例代码可能包含了窗体设计、控件初始化、事件处理函数等内容,通过阅读和理解这些代码,你可以学习到如何在...

    JS实现checkbox的全选和反选

    资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    WPF之CheckBox组的全选设计

    通过以上步骤,我们可以实现一个功能完善的WPF CheckBox全选设计。理解并熟练运用位运算和Flags特性,对于开发高效且易于维护的WPF应用至关重要。在实际项目中,可能还需要考虑其他因素,如性能优化、异常处理和用户...

    winform DataGridView表头带CheckBox全选

    在这个特定的场景中,我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`,以便实现全选和全不选的功能。这将大大提升用户体验,使得用户可以快速地对所有行进行操作,如批量删除、更新等。 首先,我们需要...

Global site tag (gtag.js) - Google Analytics