JS实现复选框 全选/全不选 切换
from: http://shaobo.iteye.com/
<input type=checkbox name=mm value=a onclick="checkItem(this, 'mmAll')"><br>
<input type=checkbox name=mm value=b onclick="checkItem(this, 'mmAll')"><br>
<input type=checkbox name=mm value=c onclick="checkItem(this, 'mmAll')"><br>
<input type=checkbox name=mm value=d onclick="checkItem(this, 'mmAll')"><br>
<input type=checkbox name=mm value=e onclick="checkItem(this, 'mmAll')"><br><br>
<input type=checkbox name=mmAll onclick="checkAll(this, 'mm')">全选与不全选的切换
<script language=Javascript>
function checkAll(e, itemName)
{
var aa = document.getElementsByName(itemName);
for (var i=0; i<aa.length; i++)
aa[i].checked = e.checked;
}
function checkItem(e, allName)
{
var all = document.getElementsByName(allName)[0];
if(!e.checked) all.checked = false;
else
{
var aa = document.getElementsByName(e.name);
for (var i=0; i<aa.length; i++)
if(!aa[i].checked) return;
all.checked = true;
}
}
</script>
分享到:
相关推荐
本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码,以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框(Checkbox)是Web表单中常见的元素,...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript(JS)实现复选框的全选、全不选和反选功能,这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中,购物车模块是用户进行商品选购时的重要组成部分。其中,复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
2. 交互反馈:为了提供更好的用户体验,可以在全选复选框的状态改变时更新其文字提示,如“全选”变为“全不选”,反之亦然。 3. 动态加载:如果复选框是动态加载的,可以通过事件委托实现全选功能。将事件监听器...
本文将详细介绍如何使用JavaScript来控制这些表单元素的状态,包括实现单个复选框的选择切换、全选/全不选功能以及检查所有选项的状态。 #### 重要概念解释 1. **复选框**:允许用户选择一个或多个选项。 2. **...
在上述代码中,`this.checked`代表主复选框的当前状态,将其赋值给每个子复选框,实现了全选/全不选。 反选功能则需要将所有子复选框的选中状态与主复选框的当前状态相反。这可以通过遍历子复选框并切换它们的`...
在这个特定的案例中,我们关注的是如何使用Element UI来实现一个带有复选框(checkbox)的下拉框(select),并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先,我们需要在项目...
实现全选/全不选功能,通常需要一个主控复选框,当它被选中时,所有关联的子复选框都被选中。可以使用JavaScript事件监听器(如`addEventListener`)来实现这个功能: ```javascript const allCheckbox = ...
总结,JavaScript复选框的相关函数涉及获取、设置状态、操作全选/全不选及事件处理等多个方面。理解并熟练运用这些函数,能帮助开发者创建更加动态和交互性强的Web页面。在实际应用中,我们还需要考虑兼容性、性能...
JavaScript 实现复选框全选和取消全选的效果是一个常见的前端交互功能,广泛应用于数据筛选、表单提交等场景。本文将深入解析如何利用 JavaScript 和 jQuery 来完成这一功能。 首先,HTML 结构中通常会有一个全选...
这段代码的意思是:当 "全选" 复选框被点击时,找到所有具有 `.childCheckbox` 类的子复选框,并将它们的 `checked` 属性设置为与 "全选" 复选框相同的状态。 此外,为了提供反选(即取消所有选中项)的功能,我们...
复选框全选功能是指当一个总复选框被选中时,页面上所有的复选框都将被选中;反选功能是指当一个反选复选框被选中时,所有未选中的复选框将被选中,而所有已选中的复选框将被取消选中。 首先,HTML部分通过标签创建...
与全选相反,全不选功能用于取消所有子复选框的选择。这可以通过设置 `checked` 属性为 `false` 来实现。我们可以修改上面的全选事件处理函数,添加一个条件判断,当“全选”复选框未被选中时,取消所有子复选框的...
全选、全不选和反选功能通常用于复选框组。全选操作可以这样实现: ```javascript $("#checkall").click(function() { $("input[name='items']").attr("checked", true); }); ``` 全不选则将所有复选框的选中状态...
在IT界,"带复选框(checkbox)的树"是一种常见的用户界面元素,它将树形结构的数据与复选框相结合,为用户提供了一种直观、便捷的方式来选择、操作和组织层次化的数据。这种控件通常用于文件管理器、设置菜单、数据库...
在本篇文章中,我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见,例如在批量操作列表项或进行多选项选择时。 首先,让我们回顾一下示例中的 HTML 结构,它...
在这篇文章中,我们将会详细介绍如何使用jQuery来实现复选框的全选、全不选和反选功能。这些操作广泛应用于表单处理中,使得用户能够更加便捷地进行多项选择操作。文章首先提供了一段jQuery代码,接着是相应的HTML...
在本示例中,我们探讨的是如何实现复选框的功能,包括全选、全不选、反选以及获取选中状态的操作。这些功能在很多应用中都非常实用,例如在表单填写、设置配置或者多选项选择时。 首先,我们要了解复选框的基本概念...
当用户在全选状态下取消选择任何一个子项时,主复选框会自动切换到未全选状态。同样,当所有子项都被选中时,主复选框会自动选中。 总结来说,纯JavaScript实现选择框的全选与反选功能主要涉及以下步骤: 1. 获取...