【前端-JS】全选功能

2017年05月26日原创 JavaScript

浏览 295425 评论 163

简介

几乎所有的项目中都会用到全选的功能，这里介绍一种通用的全选方式

方法概述

全选
- 选中全选，则所有项目全选
- 取消全选，则所有项目全不选
全选、非全选时，全选按钮状态控制
- 当所有项目全选时，全选按钮自动选中
- 当所有项目非全选时，全选按钮取消选中

范例效果图

<head>
    <meta charset="utf-8">
</head>
<input type="checkbox" onclick="select_all(this);" name="idc" id="idc_all"/>全选
<input type="checkbox" onclick="check_all(this);" name="idc" />北京
<input type="checkbox" onclick="check_all(this);" name="idc" />内蒙
<input type="checkbox" onclick="check_all(this);" name="idc" />广州

<script type="text/javascript">
    function select_all(obj) {
        cName = obj.name;
        var checkboxs = document.getElementsByName(cName);
        for ( var i = 0; i < checkboxs.length; i+=1) {
            checkboxs[i].checked = obj.checked;
        }
    }
    function check_all(obj){
        cName = obj.name;
        var checkboxs = document.getElementsByName(cName);
        all_length = checkboxs.length;
        checked_length = 0;
        for ( var i = 0; i < checkboxs.length; i+=1) {
            if(checkboxs[i].checked == true){
                checked_length += 1;
            }
        }
        if(checked_length == all_length-1 && document.getElementById(cName+"_all").checked == false){
            document.getElementById(cName+"_all").checked = true;
        }else{
            document.getElementById(cName+"_all").checked = false;
        }
    }
</script>