<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选示例</title>
</head>
<body>
<input type="checkbox" id="ckBox" onclick="selAllNo()" />全选/全不选
<br>
<input type="checkbox" name="hobby" onclick="check()" />篮球
<br>
<input type="checkbox" name="hobby" onclick="check()" />足球
<br>
<input type="checkbox" name="hobby" onclick="check()" />羽毛球
<br>
<input type="checkbox" name="hobby" onclick="check()" />乒乓球
<br>
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全不选" onclick="selNo()" />
<input type="button" value="反选" onclick="deSel()" />
<script type="text/javascript">
// 获取全选/全不选复选框
var ckBox = document.getElementById("ckBox");
// 获取到要操作的复选框
var hobbies = document.getElementsByName("hobby");
// 如果有一个没有选,那么去掉全选/全不选复选框
function check() {
for (var i = 0; i < hobbies.length; i++) {
// 只要有一个未选中,就设置复选框为未选中,并跳出循环
if (!hobbies[i].checked) {
ckBox.checked = false;
break;
} else {
// 如果全部都为选中,设置复选框为选中
ckBox.checked = true;
}
}
}
// 全选
function selAll() {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
ckBox.checked = true;
}
// 全不选
function selNo() {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
ckBox.checked = false;
}
// 全选/全不选
function selAllNo() {
if (ckBox.checked) {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
} else {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
}
// 反选
function deSel() {
for (var i = 0; i < hobbies.length; i++) {
// 选中的设为未选中,未选中的设为选中
hobbies[i].checked = (hobbies[i].checked) ? false : true;
}
// 检查反选是否有未选中的
check();
}
</script>
</body>
</html>

JavaScript基础6——全选示例的更多相关文章

  1. javascript: checked 不可全选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  3. JavaScript实现单击全选 ,再次点击取消全选

                 以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...

  4. html javascript checkbox实现全选功能

    html代码 <input type="checkbox" id="all" />all</input> <input type= ...

  5. JavaScript CheckBox实现全选和部分选择

    <html> <head> <script> function BatchAddToBasket() { var questionNums = ''; var ch ...

  6. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  7. JavaScript案例四:全选练习

    JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...

  8. JavaScript 全选函数的实现

    Html代码: <table id="purchase-info" class="table table-bordered table-hover table-st ...

  9. javascript 全选与反选

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

随机推荐

  1. python frozenset集合(17)

    在前一篇文章中我们对 python set集合 做了详细的讲解,而本文讲解的 frozenset集合 其实和set集合类似!区别在于frozenset集合不能修改/添加/删除,其他功能和set集合一样 ...

  2. <知识整理>2019清北学堂提高储备D2

    简单数据结构: 一.二叉搜索树 1.前置技能: n/1+n/2+……+n/n=O(n log n)  (本天复杂度常涉及) 2.入门题引入: N<=100000. 这里多了一个删除的操作,因此要 ...

  3. C++ 对象间通信框架 V2.0 ××××××× 之(五)

    类定义: ======================================================================= // MemberFuncPointer.h: ...

  4. WWDC2017-whats_new_in_safari_view_controller

    最后更新: 2017-08-08 官方地址: https://developer.apple.com/videos/play/wwdc2017/225/ WWDC2017中,对SafariViewCo ...

  5. 12 November

    [SCOI2005] Mine BZOJ 1088: 相信大家都玩过扫雷的游戏.那是在一个 n×m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了 ,"余"人国流行起了一种 ...

  6. Python List 列表list()方法

    Python基础数据类型之一列表list,在python中作用很强在,列表List可以包含不同类型的数据对像,同时它是一个有序的变量集合,每个变量可以存储一个地址.所有序列能用到的标准操作方法,列表也 ...

  7. nodejs工作大全

    1.修改文件夹中图片的名称 var fs = require('fs');var fileDirectory = "F:\\zdw\\修改文件夹名称\\newFile";var n ...

  8. os.environ.get()的用法

    os.environ.get()是python中os模块获取环境变量的一个方法 import os JS_ADDRESS = os.environ.get("PALM_JS_ADDRESS& ...

  9. js 父子标签同时设置onclick,子标签触发父标签onclick解决办法

    js 父子标签同时设置onclick,子标签触发父标签onclick 或 子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = win ...

  10. jobs的后台进程程序如何终止?

    好像没有专门的jobs相关的命令来终止后台进程, 只有通过 jobs -l看 后台进程的pid, 然后用kill来终止. 摘录: (( 进程的终止 后台进程的终止: 方法一: 通过jobs命令查看jo ...