最近没事做，就用js写了一个复选框选择全选时，下面的按钮也都会选择上，当下面的选框被全选时，全选按钮也会被选中;还实现了一个反选功能，可供大家参考，如果大家有好的建议也可以给我留言，我们一起学习...
<script language="javascript">
//选中全选按钮，下面的checkbox全部选中
var selAll = document.getElementById("selAll");
function selectAll()
{
var obj = document.getElementsByName("checkAll");
if(document.getElementById("selAll").checked == false)
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=false;
}
}else
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=true;
}
}
}
//当选中所有的时候，全选按钮会勾上
function setSelectAll()
{
var obj=document.getElementsByName("checkAll");
var count = obj.length;
var selectCount = 0;
for(var i = 0; i < count; i++)
{
if(obj[i].checked == true)
{
selectCount++;
}
}
if(count == selectCount)
{
document.all.selAll.checked = true;
}
else
{
document.all.selAll.checked = false;
}
}
//反选按钮
function inverse() {
var checkboxs=document.getElementsByName("checkAll");
for (var i=0;i<checkboxs.length;i++) {
var e=checkboxs[i];
e.checked=!e.checked;
setSelectAll();
}
}
</script>
<html>
<body>
<center>
<input type="checkbox" id="selAll" onclick="selectAll();" />全选
<input type="checkbox" id="inverse" onclick="inverse();" />反选
<div id="allcheck">
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>足球<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>篮球<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跑步<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>登山<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>唱歌<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跳舞<br>
</div>
</center>
</body>
</html>
分享到：
相关推荐
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
JS JS实现全选反选 全选 反选
很好用的使用jquery来实现的通用的全选反选功能
在高级控件如DataGridView中，通过结合Checkbox可以实现全选和反选功能，为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...
以上就是使用JavaScript实现全选和反选功能的基本方法。在实际应用中，可能还需要考虑更多细节，如处理异步加载的数据、兼容不同浏览器等。通过不断学习和实践，你可以熟练掌握这些技巧，提高网页的交互性和用户体验...
总结来说，带复选框的多级目录树是一种高效的数据组织和操作方式，结合全选和反选功能，能极大地提高用户的操作效率。在实现时，我们需要关注复选框的状态管理、多级目录树的数据结构以及父子节点间的联动逻辑，确保...
通过Vue.js和Vant-UI组合，我们可以有效地实现购物车的全选与反选功能。这样的实现提高了用户界面的交互性和用户体验。在实际应用中，除了全选与反选之外，还可以进一步扩展更多功能，例如批量删除、价格计算、库存...
在实际项目中，这三种方法都可以有效地实现Checkbox全选和反选功能。选择哪种方法主要取决于项目需求、性能考虑以及开发者的偏好。对于小型项目，前两种纯JavaScript的方法足够；对于大型项目，结合服务器端处理可能...
复选框在用户界面设计中扮演着重要角色，它们允许用户在多个选项中进行多选操作。全选和反选功能则是复选框常用的一种交互模式...在实际开发中，我们需要根据具体的技术栈和业务需求，灵活地实现和优化全选和反选功能。
在JavaScript编程中，"全选反选"功能是常见的用户交互...以上就是使用JavaScript实现全选/反选功能及其相关的事件绑定的详细解析。这个功能在实际开发中非常常见，理解并掌握这一机制对于提升用户体验具有重要意义。
通过js代码，实现表单元素的全选和反选的简单的例子
总结来说，JavaScript和jQuery实现全选、反选功能的核心在于监听全选按钮和子复选框的点击事件，并根据当前选中状态来更新其他复选框的状态。JavaScript通过原生DOM操作，而jQuery则利用简洁的链式操作和事件处理，...
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
资源名称：JS实现checkbox的全选和反选资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
主要适用于全选和反选 共两个按钮一个全选和反选 全选可以实现点击全选后全部被（选中） 再点击全选的时候 就被（取消）了。 当然反选就不用说了 此代码功能很实用·····
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
JS实现全选、反选、获取选中的数据、文本框控制，代码简洁易读易用
下面将详细解释如何使用JavaScript实现全选和反选功能。 首先，我们需要理解JavaScript中的DOM（Document Object Model），它是一个结构化的表示HTML或XML文档的标准，允许程序和脚本动态更新、添加和改变内容。在...
在网页开发中，全选和反选功能是常见的交互元素，尤其在表格或者多选项列表中，用户可能希望一键选择所有项目或清除已选。在这个案例中，我们将探讨如何使用HTML和jQuery来实现这一功能。 首先，我们需要创建HTML...