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> < ...
随机推荐
- linux又一次编译安装gd，添加freetype支持,解决验证码不显示问题，Fatal error: Call to undefined function imagettftext()
问题: Fatal error: Call to undefined function Think\imagettftext() in /var/www/webreg/ThinkPHP/Library ...
- php图像处理（thinkphp框架有相对强大的图像处理功能）
php图像处理(thinkphp框架有相对强大的图像处理功能) 一.总结 1.php处理图像:php处理图像需要安装外库(gd库) 2.gd库函数可以非常完美的操作图像:安装好库之后,这个库里面的函数 ...
- Appium_Java_API
1. driver.findElement(MobileBy.AndroidUIAutomator("邀请")).click();2. driver.findElementById ...
- Java基础学习总结（40）——Java程序员最常用的8个Java日志框架
作为一名Java程序员,我们开发了很多Java应用程序,包括桌面应用.WEB应用以及移动应用.然而日志系统是一个成熟Java应用所必不可少的,在开发和调试阶段,日志可以帮助我们更好更快地定位bug:在 ...
- shell学习四十天----awk的惊人表现
awk的惊人表现 awk能够胜任差点儿全部的文本处理工作. awk 调用 1.调用awk: 方式一:命令行方式 awk [-F field-separator ] 'commands' inp ...
- !!在JS中代表什么
!!一般用来将后面的表达式转换为布尔型的数据(boolean), javascript约定和c类似,规则为 ·false.undefinded.null.0."" 为 false, ...
- jemter--录制的脚本设置循环次数不起作用
以下是比较jmeter线程组中设置循环次数和循环控制器中设置循环次数的区别 1.jmeter生成的脚本没有step1(循环控制器)控制器,故循环在线程组中设置 2.badboy录制的脚本有setp ...
- SVGALib
SVGALib是一套运行于Linux及FreeBSD下的开放源代码低阶绘图函式库,它允许程式设计人员变更视讯模式及全屏幕图像,许多热门的电脑游戏如Quake及Doom都源自此技术. 范例 编辑 #in ...
- 如何启用“锁定内存页”选项 (Windows)
默认情况下,禁用 Windows 策略"锁定内存页"选项.必须启用此权限才能配置地址窗口化扩展插件 (AWE).此策略将确定哪些帐户可以使用进程将数据保留在物理内存中,从而阻止系统 ...
- 7.1 基础知识Android消息处理机制
1. Android消息处理机制: Handler, MessageQueue, Looper, Thread 线程概念 : 一个应用程序运行时它的主体被称为进程, 一个进程内部可以有多个线程, 线程 ...