新手学JavaScript(四)----CheckBox全选与全不选-阿里云开发者社区

开发者社区> 开发与运维> 正文

新手学JavaScript(四)----CheckBox全选与全不选

简介: <div class="markdown_views"> <p>    <font size="3">前两天开发界面时,实现了一个新的小功能,CheckBox复选框的全选与全不选</font></p> <h1 id="样式的实现"><font color="#CC9900">样式的实现</font></h1> <h2 id="纯css实现-vs-jquerycss实

    前两天开发界面时,实现了一个新的小功能,CheckBox复选框的全选与全不选

样式的实现

纯CSS实现 VS JQuery+CSS实现

    在这给大家推荐一款比较不错的纯CSS实现的CheckBoxCSSCheckBox,用bootstrap里面自带的checkboxradio样式不太美观,所以就另找了一个插件,这里大家可能会有疑问,为什么要找一个纯CSS实现的CheckBox?

    在这里给大家解释一下,如果说你找的Checkbox是用CSS+Javascript实现的话,在界面首次加载的时候,都需要加载Javascript事件,这个事件的目的就是给已经加载到页面上的checkbox加上一层外包装!举个栗子:有一框也非常不错的插件–ICheck,当初的第一意愿就是用它,但是后来就发现问题了,首先你要在界面上引用ICheck的css样式和HTML:

//CSS样式
<link href="your-path/square/color-scheme.css" rel="stylesheet">
<script src="your-path/jquery.icheck.js"></script>

//HTML
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

然后再js的首次加载事件中初始化:

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_square',
    radioClass: 'iradio_square',
    increaseArea: '20%' // optional
  });
});
</script>

初始化的目的就是给上面的input加上一层外包装,但是我在后边用的时候发现一个问题,就是当你的checkbox不是在jsp中提前写好的而是通过动态加载的时候,ICheck初始化的渲染就无法顺利的给所有的checkbox加上外包装,所以说我就只能去找一个纯CSS实现的checkbox,这样你引用了相应的样式,只要在class中赋相应的样式的值就可以了!

    下面就给大家介绍纯CSS实现的CheckBox,首先在界面上引用CSS样式:

<link href="${pageContext.request.contextPath}/Script/CssCheckboxKit/style.css" rel="stylesheet" type="text/css"/>

页面数据是动态拼接到界面出来的,只需要在拼接的时候在在每个inputclass中加上css-checkbox的样式就行了。

<div id="class_check" class="row" style=" width:1000px;margin-top: 5px;">
    <input id="checkbox0" class="css-checkbox" type="checkbox" value="28ZcWdULn7sMLFJdSP52P7" onclick="checkedSel()" name="checkboxClass">
    <label class="css-label" for="checkbox0">12级环境设计本科1班</label>
    <input id="checkbox1" class="css-checkbox" type="checkbox" value="26YZq2UyhvCGJVYw4jqpEM" onclick="checkedSel()" name="checkboxClass">
    <label class="css-label" for="checkbox1">15商务礼仪</label>
</div>

全选与全不选的实现

全选,全不选

    全选的话,其实有很多的实现方法,大家可以在网上查一查,有很多都值得收藏,我在这只是用其中的一种来实现的:

    //实现checkbox全选和全不选的功能,并同时加载数据
    function selectAll(obj){

        var sonSelect=document.getElementsByName("checkboxClass");

        for(var i=0;i<sonSelect.length;i++)
        {
            sonSelect[i].checked=obj.checked;
        }

        checkClick(sonSelect);
    }

全选则全选,有一个不选则不全选

    可能不太理解上面的这句话,我在这解释下,意思是:如果说子复选框全部选中的话,全选复选框就选中;如果子复选框中有一个没有选中,那么全选复选框就不选中。

    那怎么做呢?首先判断这一组的子复选框有几个,然后判断选中的复选框有几个,进行对比就可以实现:

   //获取选中的checkbox的数量
    var count;
    function checkCount(checkArry){
        count=0;
        for (var i = 0; i < checkArry.length; i++) { 
            if(checkArry[i].checked == true){
                 //选中的操作
                 count++; 
            }
       }
    }
    //当所有的子复选框被选中时,全选复选框选中;
    //只要有一个子复选框没有被选中,全选复选框便为非选中状态
    function checkedSel(){

        var checkArry = document.getElementsByName("checkboxClass");
        checkCount(checkArry);

        if( count == checkArry.length ){  //如果选中的数量和总的数量相等,为全部选中

            document.getElementById("checkboxAll").checked=true;
            checkClick(checkArry);

        }else
        {
            document.getElementById("checkboxAll").checked=false;
            checkClick(checkArry);
        }
    }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章