js进阶 9-16 如何实现多选框全选和取消
2024-08-29 21:51:50
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>
最新文章
- 内网穿透神器ngrok
- 配置WinRM的Https
- Ftp类
- tamper参数
- Gradle学习系列之三——读懂Gradle语法
- Daily Scrum 11.11
- 基于Geoserver配置多图层地图以及利用uDig来进行样式配置
- Cookie案例分析
- 怎样使用windows命令行,用notepad打开某文件夹下面的所有文件
- Android客户端通过socket与服务器通信
- akka tips
- 使用Golang搭建web服务
- 《NFC开发实战详解》笔记
- python基础之 正则表达式,re模块
- LeetCode算法题-Binary Watch(Java实现)
- ajax 执行成功 没有返回
- [转]QT子线程与主线程的信号槽通信-亲测可用!
- freemarker的template用法
- Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager
- k8s官方安装版本
热门文章
- C++源文件到可运行文件的过程
- 3lession-python编程规范
- finalkeyword对JVM类载入器的影响
- log4j配置文件及nutch中的日志配置 分类: B1_JAVA 2015-02-17 10:58 483人阅读 评论(0) 收藏
- 微信支付v2开发(4) 交易通知
- JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div
- HDU 1166 敌兵布阵 树状数组||线段树
- [D3] Create DOM Elements with D3 v4
- bootstrap课程4 bootstrap的css样式有哪些内容需要注意
- 如何启用&ldquo;锁定内存页&rdquo;选项 (Windows)