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);
	    })
	 }
});

 

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