效果：

源码：

<!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. mysql的GTID复制和多源复制

    配置基于GTID的复制--------------------------------------------在参数文件/etc/my.cnf增加下面内容:主库master_info_reposito ...

  2. IPMI命令

    yum -y install ipmitool/etc/init.d/ipmi start ipmitool -I open lan set 1 ipaddr 172.16.8.33ipmitool ...

  3. LWIP内存管理

    LWIP是一种TCP/IP协议栈,与嵌入式操作系统一样也提供了内存管理. 内存池里面有多个同样大小的内存,不同类型的内存池其里面的内存大小不一样.

  4. dubbo获取错误ip

    JAVA_OPTIONS="-Ddubbo.protocol.host=192.168.1.111

  5. [GO]非结构体匿名字段

    package main import ( "fmt" ) type mystr string //给一个类型重命名 type Person struct { name strin ...

  6. HBase-0.98.0和Phoenix-4.0.0分布式安装指南

    目录 目录 1 1. 前言 1 2. 约定 2 3. 相关端口 2 4. 下载HBase 2 5. 安装步骤 2 5.1. 修改conf/regionservers 2 5.2. 修改conf/hba ...

  7. 在Lua中封装一个调试日志（附lua时间格式）

    --自己封装一个Debug调试日志 Debug={} Info={} local function writeMsgToFile(filepath,msg) end function Debug.Lo ...

  8. centos7 编译安装nginx

    转载文章 原文地址 https://www.cnblogs.com/liujuncm5/p/6713784.html 安装所需环境 Nginx 是 C语言 开发,建议在 Linux 上运行,当然,也可 ...

  9. 谷歌浏览器插件开发入门-官方版Helloworld详解

    目录: 需求 原理 实现步骤: 一个空的插件 一个可以设置一种背景色的插件(可以设置百度首页的背景色为绿色) 一个可以设置多种背景色的插件 需求: 插件可以改变特定网址的背景颜色. 原理: 将各种ht ...

  10. [原创] 改善 Firemonkey Canvas 几何绘图质量问题（移动平台）

    说明: Fiiremonkey 的跨平台能力,大家有目共睹(一码同介面跨四平台),唯独移动平台在几何绘图方面,质量始终不尽人意,我也曾试着去修正(如:修正曲线平滑问题),也曾找过第三方案(如:AggP ...