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>