今天来做一些练习，做全选练习

原生版的实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        </style>

    </head>

    <script type="text/javascript">

        window.onload = function(){

            var items = document.getElementsByName("items");

            var checkedAllBox = document.getElementById("checkedAllBox");

            //全选

            var checkedAllBtn = document.getElementById("checkedAllBtn");

            checkedAllBtn.onclick = function(){

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

                    items[i].checked = true;

                }

                //更新全选和全不选

                checkedAllBox.checked = true;

            }

            //全不选

            var checkedNoBtn = document.getElementById("checkedNoBtn");

            checkedNoBtn.onclick = function(){

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

                    items[i].checked = false;

                }

                //更新全选和全不选

                checkedAllBox.checked = false;

            }

            //反选

            var checkedRevBtn = document.getElementById("checkedRevBtn");

            checkedRevBtn.onclick = function(){

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

                    items[i].checked = !items[i].checked;

                    if (!items[i].checked) {

                        checkedAllBox.checked = false;

                    }

                }

            }

            //提交

            var sendBtn = document.getElementById("sendBtn");

            sendBtn.onclick = function(){

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

                    if(items[i].checked){

                        alert(items[i].value)

                    }

                }

            }

            //通过点击全选和全不选，items也选中

            checkedAllBox.onclick = function(){

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

                    items[i].checked = this.checked;

                }

            }

            //通过点击items，如果有全选则全选、全不选也出现

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

                items[i].onclick = function(){

                    checkedAllBox.checked = true;

                    for(var j =0;j<items.length;j++){

                    if(!items[j].checked){

                        checkedAllBox.checked = false;

                        break

                    }

                }

                }

            }

        }

    </script>

    <body>

        <form method="post" action="">

            你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

            <br />

            <input type="checkbox" name="items" value="足球" />足球

            <input type="checkbox" name="items" value="篮球" />篮球

            <input type="checkbox" name="items" value="羽毛球" />羽毛球

            <input type="checkbox" name="items" value="乒乓球" />乒乓球

            <br />

            <input type="button" id="checkedAllBtn" value="全　选" />

            <input type="button" id="checkedNoBtn" value="全不选" />

            <input type="button" id="checkedRevBtn" value="反　选" />

            <input type="button" id="sendBtn" value="提　交" />

        </form>

    </body>

</html>

功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态

　　　　　　　　$(function(){

                var $items = $(":checkbox[name='items']");

                var $checkedAllBox = $("#checkedAllBox");

                //1. 点击'全选': 选中所有爱好

                $("#checkedAllBtn").click(function(){

                //$items.each(function(){

                //this.checked = true;

                //})

                ////全选/全不选选项

                //$checkedAllBox[0].checked = true;

                $items.prop("checked",true);

                $checkedAllBox.prop("checked",true);

                });

                //2. 点击'全不选': 所有爱好都不勾选

                $("#checkedNoBtn").click(function(){

                    $items.prop("checked",false);

                    $checkedAllBox.prop("checked",false);

                });

                //3. 点击'反选': 改变所有爱好的勾选状态

                $("#checkedRevBtn").click(function(){

                    $items.each(function(){

                        this.checked = !this.checked;

                    })

                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)

                });

                //4. 点击'提交': 提示所有勾选的爱好

                $("#sendBtn").click(function(){

                    $items.filter(':checked').each(function () {

                      alert(this.value)

                    })

                });

                //5. 点击'全选/全不选': 选中所有爱好, 或者全不选中

                $checkedAllBox.click(function(){

                    $items.prop("checked",this.checked);

                });

                //6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态

                $items.click(function(){

                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)

                })

            })

全选练习-原生版和jQuery的更多相关文章

  1. jq变态全选vs原生变态全选

    <script> $(function(){ var num=0; $("#btn").on('click',function(){ if(this.checked){ ...

  2. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery入门简单实现反选与全选

    //html代码<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路 <input t ...

  5. Jquery学习之路(一) 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...

  6. 列表中checked全选按钮的实现

    用过音乐播放器的人都知道有个全选按钮,如果使用Jquery实现,有个直接选中checked标签的方式 <!DOCTYPE HTML> <html> <head> & ...

  7. jquery版的全选，全不选和反选

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  8. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  9. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

随机推荐

  1. 生死系列--SongXingZhi

    SongXingZhi,我上中专时的同学,任劳动委员,湖北随州人.其实在上学以及毕业后,我们俩没什么交往,也没说过几句话. 印象比较深的一次是在上什么课时,老师拖堂了 ,他直接从课桌上翻过来,从后门出 ...

  2. 20155238 2016-2017-2 《Java程序设计》第二周学习总结

    教材学习内容总结 java基本类型:整数,字节,浮点数,字符 //"单行批注" */"单行批注" 变量 "驼峰式命命法" int age0f ...

  3. RMAN 与control文件和spfile文件的备份

    以10.2为例,官方文档如此说: http://docs.oracle.com/cd/B19306_01/backup.102/b14191/rcmconc1.htm The RMAN behavio ...

  4. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 一维码UPC A简介及其解码实现(zxing-cpp)

    UPC(Universal Product Code)码是最早大规模应用的条码,其特性是一种长度固定.连续性的条  码,目前主要在美国和加拿大使用,由于其应用范围广泛,故又被称万用条码. UPC码仅可 ...

  6. 2597: [Wc2007]剪刀石头布

    2597: [Wc2007]剪刀石头布 链接 分析: 费用流. 首先转化一下问题,整张图最优的情况是存在$C_n^3$个,即任意3个都行,然后考虑去掉最少不满足的三元环. 如果u赢了v,u向v连一条边 ...

  7. jsp如何往js里传值

    1.jsp里定义id: 2.js里用j-query选择器获取(     $('#id).val();      )    或者docment.getEle....获取.

  8. Android Service(下)

    阅读本文需要先阅读Android Service(上) 一 为什么需要bindService() 绑定服务就是为了和服务进行通讯 可以调用服务里面的方法 二 bindService()调用服务里面方法 ...

  9. WebStorm微信小程序单位rpx出现空格问题

    Windows先下载sed 配置Tools->File Watchers->+ 添加下图配置 //windows系统 -i s/"\ rpx"/rpx/g $FileP ...

  10. JavaScript-强制类型转换

    因为没有学过其他编程语言,因此作为我的第一门编程“母语”我在这就不举其他编程语言的例子了,JavaScript这个动态类型脚本语言的变量号称是没有类型的,那么我们怎么转换他的变量呢?而且还要强行转换. ...