checkbox js----复选框

js 部分
/**
* 通用JS
* 多选框点击事件
*/

function checkall() {

    var ischecked = document.getElementById("checkall").checked;
    if (ischecked) {
        checkallbox();
    } else {
        discheckallbox();
    }
}
function checkallbox() {

    var boxarray = document.getElementsByName("box");
    for ( var i = 0; i < boxarray.length; i++) {
        boxarray[i].checked = true;
    }

}
function discheckallbox() {

    var boxarray = document.getElementsByName("box");
    for ( var i = 0; i < boxarray.length; i++) {
        boxarray[i].checked = false;
    }
}

//第一种写法

function getIds() {

    var boxvalues = getallcheckedvalue();
    var boxvaluesArray = boxvalues.split(",");
    var ids = "";
    for ( var i = 0; i < boxvaluesArray.length; i++) {
        var boxvalue = boxvaluesArray[i];
        var boxvalueArray = boxvalue.split("|");
        var id = boxvalueArray[0];
        if (ids == "") {
            ids = id;
        } else {
            ids = ids + "," + id;
        }
    }
    if(ids != ""){
        ids = ids.substring(0,ids.length-1);
    }
    return ids;
}

//第二种写法

//获取ids值
        function getIds(){
            var ids = "";
            $(".table .box").each(function(){
                if(this.checked){
                    var id = this.value;
                    ids +=id + ",";
                }
            });

            if(ids != ""){
                ids = ids.substring(0,ids.length-1);
            }
            return ids;
        }
function getallcheckedvalue() {

    var boxvalues = "";
    var boxarray = document.getElementsByName("box");
    for ( var i = 0; i < boxarray.length; i++) {
        if (boxarray[i].checked) {
            var boxvalue = boxarray[i].value;
            if (boxvalues == "") {
                boxvalues = boxvalue;
            } else {
                boxvalues = boxvalues + "," + boxvalue;
            }
        }
    }
    return boxvalues;
}
function checkonebox() {

    if (isallchecked()) {
        document.getElementById("checkall").checked = true;
    }
    if (isalldischecked()) {
        document.getElementById("checkall").checked = false;
    }
}
function isallchecked() {

    var boxarray = document.getElementsByName("box");
    for ( var i = 0; i < boxarray.length; i++) {
        if (!boxarray[i].checked) {
            return false;
        }
    }
    return true;

}
function isalldischecked() {

    var boxarray = document.getElementsByName("box");
    for ( var i = 0; i < boxarray.length; i++) {
        if (boxarray[i].checked) {
            return false;
        }
    }
    return true;
}

页面 部分

<table id="contentTable" class="table table-striped table-bordered table-condensed">
        <thead>
            <tr>
                <th style="width:30px;">

<input type="checkbox" id="checkall" value="" onclick="checkall()"/>
--------------------------------------------------------------------

</th>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
                <tr>
                    <td style="width:30px;">

<input type="checkbox" class="box" name="box" value="${id}" onclick="checkonebox()"/>
------------------------------------------------------------------------

</td>
                    <td>1</td>
                    <td>张三</td>
                    <td>18岁</td>
                </tr>
        </tbody>
    </table>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值