javascript复选框全选和取消全选

原文代码

jsp页面:

<table>
 <thead>
     <tr>
        <th>序号<input type="checkbox" id="all"></th>
        <th>员工号</th>
        <th>用户名称</th>
    </tr>
</thead>
<tbody id="dataTableTbody">
   
</tbody>
</table>

js代码:

将查询的值展示到页面上

dataList += '<tr>';
dataList +='<td><input type="checkbox" lay-skin="primary" name="packageId" value="' + dataArray.id + '"></td>';
dataList +='<td>' + dataArray.pPackageName + '</td>';
dataList +='<td>' + dataArray.zxName+ '</td>';
dataList += '</tr>';
$('#dataTableTbody').html(dataList);

全选和取消全选

//全选按钮状态显示判断
 $(document).off('click', '#dataTableTbody input[type=checkbox]').on('click', '#dataTableTbody input[type=checkbox]', function() {
	var nocheckedList = $("#dataTableTbody").find('input:not(:checked)');
	if(nocheckedList.length == 0){
	    $("#all")[0].checked = true;
	 }else{
	    $("#all")[0].checked = false;
	 }
});
// 全选/取消
$("#all").click(function(){
	if($(this).is(':checked')){
	    $("#dataTableTbody").find('input').each(function(){
	    	$(this).prop("checked",true);
	    })
	 }else{
	    $("#dataTableTbody").find('input').each(function(){
	    	$(this).prop("checked",false);
	    })
	 }
});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章