关于jsp页面table 实现checkbox复选

在table里实现复选，在<thead> <tr>标签下加入<th style="width: 7%;height: 20px;"><input type="checkbox" /></th>如图所示

这里插入的复选框在页面效果如图：

然后在<tbody><tr>里加入<td><input type="checkbox"  value="${item.id}"/></td>这里的value值是列表里边的id，这里必须要将id绑定进去，如图

这句话在页面中的效果如图：

然后用js实现复选框的全选效果

var $thr = $('table thead tr');      //这是获取表头的复选框

var $checkAll = $thr.find('input');   

$checkAll.click(function(event){  
    /*将所有行的选中状态设成全选框的选中状态*/  
    $tbr.find('input').prop('checked',$(this).prop('checked'));  
    /*并调整所有选中行的CSS样式*/  
    if ($(this).prop('checked')) {  
        $tbr.find('input').parent().parent().addClass('warning');  
    } else{  
        $tbr.find('input').parent().parent().removeClass('warning');  
    }  
    /*阻止向上冒泡，以防再次触发点击操作*/  
    event.stopPropagation();  
});  

有了这段js 复选框的效果就有了

接下来进行id值的绑定，将我们选定的项所取的id拿出来只需要在页面调用下面这段代码我们就可以得到选定的项的id（这里使用的一个数组接收的所选id）

function ck(){
var nodes = $("#tableId tr td input:checked"); //获取所有复选框选中的项作为一个对象
var ids = new Array();  //创建一个接收id的数组
$.each(nodes,function(i){    //遍历所选的对象
ids.push($(nodes[i]).val());  //将每一个选中对象的值赋给接收id的数组
});

//下面这句只是测试获取数组成功没有没其他用
if (ids.length !=0) {
alert(ids);
}
}

效果如图

到这里我们已经实现了复选并成功获取到了选中项的id

（此文只为了让自己记得复选技术的做法，所以多用了截图，仅供其他小伙伴参考）