思路：

1、获取元素。

2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。

3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。

<!DOCTYPE html>

<html>
    <head><meta charset="UTF-8"></head>
    <body>
        <div id="div">
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
        </div>
        <input type="button" value="全选" onclick="CheckAll()"/><br />
        <input type="button" value="不选" onclick="UnCheck()"/><br />
        <input type="button" value="反选" onclick="othercheck()"/><br />
        <script>
            var CheckBox=div.getElementsByTagName('input');
             
            //全选
            function CheckAll(){
                for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=true;};
            };
             
            //不选
            function UnCheck(){
                for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=false;};
                };
             
            //反选
            function othercheck(){
                for(i=0;i<CheckBox.length;i++){
                    if(CheckBox[i].checked==true){ CheckBox[i].checked=false;}
                    else{ CheckBox[i].checked=true}
                }
            };
        </script>
    </body>
</html>

JS全选与不选、反选的更多相关文章

  1. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  2. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  3. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  4. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  5. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  7. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

  8. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  9. JS全选按钮练习

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

  10. 原生JS实现全选和不全选

    案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

随机推荐

  1. 从概念到业务来看 To B 和 To C 产品区别在哪？

    自从互联网火了以后,一大堆 o2o,b2b,c2c 的产品出现,这些名词也渐渐为人熟知,但很多人对这些产品的理解也是停留在概念上,实际上绝大部分人用的都是 To C(也写作2c)产品,比如微信,qq ...

  2. 转： 【Java并发编程】之十八：第五篇中volatile意外问题的正确分析解答（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17382679 在<Java并发编程学习笔记之五:volatile变量修饰符-意料之外 ...

  3. 【2017集美大学1412软工实践_助教博客】团队作业6——展示博客（Alpha版本）

    题目 团队作业6: http://www.cnblogs.com/happyzm/p/6791211.html 团队成绩 团队成员简介 项目地址 项目目标,包括典型用户.功能描述.预期用户数量 如何满 ...

  4. Swing-JTable检测单元格数据变更事件

    在JTable的初级教程中往往会提到,使用TableModel的 addTableModelListener方法可以监听单元格数据的变更,在其事件处理函,数tableChanged中,可以通过e.ge ...

  5. 控制结构(9) 管道(pipeline)

    // 上一篇:线性化(linearization) // 下一篇:指令序列(opcode) 最近阅读了酷壳上的一篇深度好文:LINUX PID 1 和 SYSTEMD.这篇文章介绍了systemd干掉 ...

  6. 201521123033《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. answer: 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1.List中指定元 ...

  7. 201521123011 《java程序设计》 第7周学习总结

    1. 本周学习总结 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源 ...

  8. 201521123094 吴慧婷 Java课程设计

    1. 团队课程设计博客链接 团队课程设计博客 2. 个人负责模块或任务说明 我的任务: (1)设置象棋的主窗口(仅将Board显示出来) (2)处理象棋的规则 (3)象棋界面的操作 (4)综合全部功能 ...

  9. 201521123017 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 Q1.MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...

  10. 小巧玲珑：机器学习届快刀XGBoost的介绍和使用

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:张萌 序言 XGBoost效率很高,在Kaggle等诸多比赛中使用广泛,并且取得了不少好成绩.为了让公司的算法工程师,可以更加方便的 ...