效果：

源码：

<!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. [SoapUI] 通过Groovy获取SoapUI当前Project所在的目录

    import com.eviware.soapui.support.GroovyUtils def groovyUtils = new GroovyUtils( context ) def proje ...

  2. Ubuntu命令行下安装、卸载、管理软件包的方法

    一.Ubuntu中软件安装方法 1.APT方式 (1)普通安装:apt-get install softname1 softname2 -; (2)修复安装:apt-get -f install so ...

  3. vscode安装dlv插件报错：There is no tracking information for the current branch.

    vscode安装dlv插件报错:There is no tracking information for the current branch. https://blog.csdn.net/a7859 ...

  4. 【转载】rabbitmq的发布确认和事务

    地址:https://my.oschina.net/lzhaoqiang/blog/670749 摘要: 介绍confirm的工作机制.使用spring-amqp介绍事务以及发布确认的使用方式.因为事 ...

  5. CodeForces 346A Alice and Bob (数学最大公约数)

    题意:有一堆数,然后有两个人轮流从中取出两个数,这两个数的差的绝对值不在这个集合,然后把这个数放进这个集合,如果哪个人不能拿了,就是输了,问你谁赢. 析:当时连题意都没看好,以为拿出两个数,就不放回了 ...

  6. linux系统学习（二）

    文件,目录 pwd:查看当前目录 Print Working Directory cd,ls(ll),mkdir -p Change Directory List Make Directory du ...

  7. Alpha冲刺（四）

    Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1(组长)柯奇豪 过去两天完成了哪些任务 文章基本的存储.列表生成显示 展示G ...

  8. C# 过滤SQL 字符串中的 参数

    /// <summary> /// 参数过滤 /// </summary> /// <param name="parameters"></ ...

  9. C#中遇到的方法总结

    1.Select(string filterExpression, string sort)  // 获取按照指定的排序顺序且与筛选条件相匹配的所有 System.Data.DataRow 对象的数组 ...

  10. 关于Qt官方下载页的最新变动

    时间过得很快,现在Qt已经迎来了5.10版本,但是当我们去下载页下载对应安装包的时候,已经找不到之前的offline安装包了.你能够看到的只有在线安装包,并且我自己有做过测试,国内的网络基本上没有机会 ...