js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消
一、总结
一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好。
1、如何实现多选框全选和取消?
选择取到每一个checkbox的值,然后赋值为true或者false就好。
17 var arr=document.getElementsByName('check')
18 // alert(arr.length)
19 if (c) {
20 for (var i = 0;i<arr.length;i++){
21 arr[i].checked=true;
2、实现多选框全选和取消用到的是checkbox的哪个重要属性?
checked
二、js进阶 9-16 如何实现多选框全选和取消
1、案例描述
实现多选框全选和取消
2、相关知识:单选和复选框
通常使用input元素来创建单选和复选框,的属性和方法相同,两者属性和方法相同,具有input元素共有的其他属性和方法。
属性
- 属性:id/form/name/type/disabled.......
- Checked 设置或返回 checkbox 是否应被选中
- defaultChecked 返回 checked 属性的默认值。
方法
- click() 模拟在 checkbox 中的一次鼠标点击。
- blur()、focus()
3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<form action="#" method="post" name="form01">
<p>选择课程:</p>
<p>全选:<input type="checkbox" name="all" value="全选" onclick="checkAll(this.checked)"></p>
<p><input type="checkbox" name="check" value="A" >HTML5
<input type="checkbox" name="check" value="B">PHP
<input type="checkbox" name="check" value="C">JAVA</p>
</form>
<script type="text/javascript">
function checkAll(c){
var arr=document.getElementsByName('check')
// alert(arr.length)
if (c) {
for (var i = 0;i<arr.length;i++){
arr[i].checked=true;
}
}else{
for(var i=0;i<arr.length;i++){
arr[i].checked=false;
}
}
} </script>
</body>
</html>
js进阶 9-16 如何实现多选框全选和取消的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- J2SE核心开发实战(一)——认识J2SE
认识J2SE 一.课程简单介绍 在本章学习開始前,你应该具备一些Java的基础知识. 我们将在本章来认识J2SE,并复习一下前面学过的面向对象的相关知识. 注:全部的蓝色文字都是带超链接的,这些链接是 ...
- Windows 共享无线上网 无法启动ICS服务解决方法(WIN7 ICS服务启动后停止)
Windows 共享无线上网 无法启动ICS服务解决方法(WIN7 ICS服务启动后停止) ICS 即Internet Connection Sharing,internet连接共享,可以使局域网上其 ...
- 使用jmeter监控服务器性能指标
先下载jmeter-ServerAgent Windows下载和Linux下载 https://jmeter-plugins.org/wiki/PerfMon/ 找到ServerAgent的下载链接 ...
- 理解String的compareTo()方法返回值
compareTo()的返回值是整型,它是先比较对应字符的大小(ASCII码顺序), 如果第一个字符和参数的第一个字符不等,结束比较,返回他们之间的差值. 如果第一个字符和参数的第一个字符相等,则以第 ...
- 位数(digits)的处理
主要针对:二进制表示法,以及十进制表示法: 1. 获取位数 已知该数 n 采用十进制进行表示 二进制形式的位数:⌊log2n⌋+1 十进制形式的位数:⌊log10n⌋+1 2. 截断(保留前/后 m ...
- Redo 非current损坏
Redo log 文件损坏或丢失,在启动数据库时在alert日志中会有如下错误: ORA-00313: open failed for members of log group 1 of thread ...
- 关于HEXO安装失败的解决方法
目前国内npm源有问题:所以键入如下代码即可安装成功: npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm inst ...
- JNI各种环境下编译方法及初期出错分析
转自 https://www.cnblogs.com/xyang0917/p/4172490.html 第五步.将C/C++代码编译成本地动态库文件 动态库文件名命名规则:lib+动态库文件名+后缀( ...
- ubuntu 14 编译视频第三方库ijkplayer,能够在winows下使用
1.先安装相关环境,详细在这里http://blog.163.com/zhuowr2006@126/blog/static/98334653201612310647799/ 依据上面那个安装之后,会 ...
- 9、getopt的用法,被用来解析命令行选项参数
#include <unistd.h> extern char *optarg; //选项的参数指针 extern int optind, //下一次调用ge ...