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 如何实现多选框全选和取消的更多相关文章

  1. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  2. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  4. FineReport——JS二次开发(复选框全选)

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  5. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  7. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  8. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. ASP.Net中页面传值的几种方式

    开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...

  2. [python]两种编程思维--面向过程和面向对象

    例如:eg:炒一份西红柿鸡蛋 一.面向过程 面向过程的编程思维,如下 二.面向对象 制作一台炒菜机器人,然后告诉机器人做一道西红柿炒鸡蛋.在这里,我们直接面对的是机器人,而非炒菜的过程,所以这里机器人 ...

  3. jvm compile

    >>>Making sec-files-win @ Thu Oct 17 20:34:02 CST 2013 ... >>>Making jgss-files @ ...

  4. 关于在IISserver上执行asp.net Web程序出现以下 “Could not load file or assembly。。。”问题的

    Could not load file or assembly 'System.EnterpriseServices, Version=4.0.0.0, Culture=neutral, Public ...

  5. Codeforces Round #450 (Div. 2) D.Unusual Sequences (数学)

    题目链接: http://codeforces.com/contest/900/problem/D 题意: 给你 \(x\) 和 \(y\),让你求同时满足这两个条件的序列的个数: \(a_1, a_ ...

  6. mysql 配置,还得多看看~

    http://blog.chinaunix.net/uid-20639775-id-154429.html

  7. 【UVA】434-Matty&#39;s Blocks

    一道非常easy想复杂的题,给出主视图和右视图,计算最少能用几个正方体组成相应的视图,以及最多还能加几块正方体. 求最多加入事实上就是求出最多的正方体数减去最少的,主要就是最少的不好求. 一開始各种模 ...

  8. C# 获取文件路径,读取项目中某程序集下文件

    获取文件路径 ------------------------------------------------------------------------- winform获取文件路径: stri ...

  9. 嵌入式Linux学习笔记 NAND Flash控制器

    一.NAND Flash介绍和NAND Flash控制器的使用 NAND Flash在嵌入式系统中的作用,相当于PC上的硬盘 常见的Flash有NOR Flash和NAND Flash,NOR Fla ...

  10. RDA安装

    解压到/home/oracle下面     $ cp /home/oracle/rda $ perl rda.pl -cv   运行上面的命令,如果最后一行出现下面所示,说明没问题       No ...