checkbox js----复选框

最新推荐文章于 2026-05-21 05:37:58 发布

原创最新推荐文章于 2026-05-21 05:37:58 发布 · 934 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#checkbox #javascript

Js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种实现多选框全选、反选及获取所有被选中项ID的方法，并提供了两种不同的实现方式。一种是纯JavaScript实现，另一种使用了jQuery简化代码。此外还介绍了如何判断是否所有多选框都被选中。

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>