checkbox js----复选框

来源：互联网发布：软件的英文编辑：程序博客网时间：2024/04/29 17:56

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>

0 0