效果：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        select{

            margin-left: 100px;

        }

    </style>

</head>

<body>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<input type="checkbox" name="fruit" value="1"><br/>

<button type="button" onclick="selectAll()">全选</button>

<button type="button" onclick="unSelectAll()">全不选</button>

<button type="button" onclick="converSelectAll()">反选</button>

<script type="text/javascript">

    var inputs =  document.getElementsByTagName("input");

    function selectAll(){

        for(var i = 0;i<inputs.length;i++){

            inputs[i].checked = true;

        }

    }

    function unSelectAll(){

        for(var i = 0;i<inputs.length;i++){

            inputs[i].checked = false;

        }

    }

    function converSelectAll(){

        for(var i = 0;i<inputs.length;i++){

            if(inputs[i].checked){

                inputs[i].checked = false;

            }else{

                inputs[i].checked = true;

            }

        }

    }

</script>

</body>

</html>

js实现checkbox全选，全部选和反选效果的更多相关文章

  1. js实现checkbox全选与反选

    <script type="text/javascript" language="javascript"> function checkAll(id ...

  2. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  3. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  4. js解决checkbox全选和反选的问题

    function SelectAll() { var checkboxs=document.getElementsByName("chk_list"); for (var i=0; ...

  5. js实现CheckBox全选或者不全选

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">< ...

  6. JS控制checkbox全选、取消全选、删除功能的代码贴出来。。

    function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0; ...

  7. 初学者 的 js 关于checkbox全选的问题

    <script type="text/javascript" language="javascript" > function ff() { var ...

  8. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  9. js实现checkbox的全选和全不选功能

    html代码: <form name="form1" method="post" action="manage.php?act=sub" ...

随机推荐

  1. vmware Selinux配置错误，导致无法启动虚拟机

    Linux 开机提示kernel panic - not syncing: Attempted to kill init! 解决方法: 系统启动的时候,按下‘e’键进入grub编辑界面,编辑grub菜 ...

  2. pkg-config的妙用

    1.每个lib下都会有个pkg-config文件夹,里面有相应pc文件 修改里面内容可以改变pkg-config显示 2.将.pc文件所在路径添加到PKG_CONFIG_PATH中如: export ...

  3. Tftp上传、下载

    上传 tftp -g -r filename serverip 下载 tftp -p -l filename serverip

  4. mybatis常用方法总结

    mybatis的强大特性之一就是动态SQL.我们在写复杂查询的时候,会发现复杂查询包括了各种各样的判断,我们很难一鼓作气的写出完美的查询.动态SQL语句可以帮助我们拼接不同的SQL语句,而已让我们的代 ...

  5. 【Django】Django Debug Toolbar调试工具配置

    正在发愁怎么调试Django,就遇到了Django Debug Toolbar这个利器. 先说遇到的问题: 网上也有教程,不过五花八门的,挨个尝试了一遍,也没有成功运行.最后终于找到问题所在: 从开发 ...

  6. HDU 3361 ASCII (水题)

    题意: 析:不说话. #include <cstdio> #include <string> #include <cstdlib> #include <cma ...

  7. 在APP中集成iAd Banner展示广告盈利

    如果你已经做了一款超牛X的APP.你也许还有一件是需要操心.APP够好了,怎么盈利呢?你可以对下载你的APP的用户收费.也可以完全的免费,然后在APP里放广告来实现盈利.现在来说,除非一款APP真的是 ...

  8. 大型Unity手游《英雄之刃-最后之战》源码分析

    英雄之刃之最后一战是国内首款原创精品MOBA手游,是一款由前暴雪文案亲自操刀世界观,日韩专业团队打造美术场景,新加坡团队精心制作战斗音乐的旷世之作! 超快速的匹配对战.默契的团队协作给你带来意犹未尽的 ...

  9. 编写高质量代码改善C#程序的157个建议——建议89：在并行方法体中谨慎使用锁

    建议89:在并行方法体中谨慎使用锁 除了建议88所提到的场合,要谨慎使用并行的情况还包括:某些本身就需要同步运行的场合,或者需要较长时间锁定共享资源的场合. 在对整型数据进行同步操作时,可以使用静态类 ...

  10. Linux Crontab 任务管理工具命令以及示例

    Crontab 是 Linux 平台下的一款用于循环执行例行任务的工具,Linux 系统由 cron (crond) 这个系统服务来控制任务 , Linux系统本来就有很多的计划任务需要启动 , 所以 ...