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> < ...
随机推荐
- 解决iOS空指针数据的问题
iOS开发中常常会遇到空指针的问题. 如从后台传回来的Json数据,程序中不做推断就直接赋值操作,非常有可能出现崩溃闪退. 为了解决空指针的问题,治标的方法就是遇到一个处理一个.这样业务代码里面就插了 ...
- 不安装谷歌市场，下载谷歌市场中的APK
不安装谷歌市场,下载谷歌市场中的APK GooglePlayStore 是谷歌官方的的应用市场,有的时候还是需要从谷歌市场下载APK文件.国内的安卓手机厂商都不自带GooglePlay,甚至一些手机& ...
- Mybatis like查询的写法--转载
原文地址:http://lavasoft.blog.51cto.com/62575/1386870 Mybatis like查询官方文档没有明确的例子可循,网上搜索了很多,都不正确. Mybatis ...
- Docker---(7)Docker安装启动RabbitMQ
原文:Docker---(7)Docker安装启动RabbitMQ 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/ ...
- echarts同一页面四个图表切换的js数据交互
需求:点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了 $(function() { $("#heart").o ...
- 【Codeforces Round #442 (Div. 2) B】Nikita and string
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举中间那一段从哪里开始.哪里结束就好 注意为空的话,就全是a. 用前缀和优化一下. [代码] #include <bits/ ...
- 【AtCoder Beginner Contest 074 B】Collecting Balls (Easy Version)
[链接]h在这里写链接 [题意] 看懂题目之后就会发现是道大水题. [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h&g ...
- Qt的一些开发技巧
Lambda匿名函数 有时候槽函数代码辑逻辑非常简单,可以直接用下面的Lambda匿名函数处理信号,简捷明了.需c++11支持,不支持自身递归调用. 1 2 3 4 5 6 7 QComboBox * ...
- js闭包作用（避免使用全局变量）
js闭包作用(避免使用全局变量) 一.总结 1.优点::可以把局部变量驻留在内存中,可以避免使用全局变量; 2.缺点:也有占用更多内存的缺点,用完要及时让垃圾回收器回收 fn=null //应及时解 ...
- [WASM] Create and Run a Native WebAssembly Function
In this introduction, we show a simple WebAssembly function that returns the square root of a number ...