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. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  2. （JavaScript基础向）sort()方法里的排序函数的理解

    比较常见的解释可以看这里:js的sort()方法,这篇博客写得挺好的,一般的应用的理解已经足够了. 但是如果要活用sort()方法里面的参数——也就是排序函数的话,可能就比较难理解了. 然后我就总结出 ...

  3. Java Web学习总结（13）——JSP入门

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  4. JS里的map与forEach遍历

    map 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值. var numbers = [3,2,6,3] function func(num){ return num * documen ...

  5. express 的路由分离

    在做大型项目是一般不会把路由写入server.js里,所以就有了路由分离 1.在项目目录下创建router文件夹 user.js var express = require("express ...

  6. python3 登录验证小程序，同一用户输错三次密码，锁定账户

    ''' 让用户输入用户名密码 认证成功后显示欢迎信息用户3次认证失败后,退出程序,再次启动程序尝试登录时,还是锁定状态''' # !/usr/bin/env python # -*- coding:u ...

  7. Day2：数据运算

    一.算数运算 如: #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan print(10%2) #求模(取模) # 0 ...

  8. 卫星网络中使用TCP协议的劣势（所以才有TCP优化版用来卫星通信啊，比如TCP-Peach和ADolar）

    卫星网络中使用TCP协议的劣势 为了避免产生网络拥塞,原TCP协议综合采用了慢启动.拥塞避免.快速重传以及快速恢复等算法.但这些算法应用的前提是网络发生拥塞造成丢包,然而在误码率相对较高的卫星通信系统 ...

  9. GMTC2019会后：做一场冷门的技术专场是什么体验

    上周四(6.20)GMTC2019大会的第一天,很荣幸作为「UI与图形渲染」专场出品人获得了与图形领域几位技术专家同场交流的机会. 图形技术在前端范畴内是一个相对小众的话题,虽然前端工程师几乎每天都在 ...

  10. 【BZOJ 3238】[Ahoi2013]差异

    [链接]h在这里写链接 [题意]     还有更简洁的题目描述吗/xk [题解]     对于lenti+lentj这一部分,比较好处理.     可以弄一个前缀和.     然后O(N)扫描一遍. ...