Html:實現checkbox全選、非全選、單選
阿新 • • 發佈:2018-11-14
Html:實現checkbox全選、非全選、單選
全域性選擇與單選有以下兩點關係:
1、當我把所有單選都選擇上的時候,全選應該是被選擇狀態
2、當我取消一個單選時,全選應該是取消的狀態
3、點選全選按鈕,所有的單選都被選上;取消全選按鈕,所有的單選都被取消
一個很簡單的功能,那就直接程式碼實現了吧
jsp的程式碼:
<table class="am-table am-table-striped am-table-hover table-main"> <thead> <tr> <th class="table-check"><input type="checkbox" class="parent_check" /></th> <th class="table-id">序號</th><th class="table-title">標題</th> <th class="table-type">回覆</th> <th class="table-author am-hide-sm-only">轉發</th> <th class="table-type">傳送人</th> <th class="table-date am-hide-sm-only">傳送時間</th> <th class="table-type">讀否</th> </tr> </thead> <tbody class="mailcontent dataBox"> <%--顯示分頁資料--%> </tbody> </table>
js填充資料
function setContent(startPage, data){ var str; for(var i = num; i < end; i++) { str += '<tr>'; str += '<td><input type="checkbox" class="son_check"/></td>'; str += '<td>' + data[i].msgnum +'</td>'; str += '<td><a href="<%=basePath%>jsp/email_content.jsp?msgnum='+ data[i].msgnum + '">' + data[i].subject + '</a></td>'; str += '<td><a href="<%=basePath%>jsp/reply.jsp?msgnum=' + data[i].msgnum + '">回覆</a></td>'; str += '<td><a href="#">轉發</a></td>'; str += '<td class="am-hide-sm-only">' + data[i].from +'</td>'; str += '<td class="am-hide-sm-only">'+ data[i].sendData + '</td>'; str += '<td>否</td>'; str += '</tr>'; } if(data.length>0 && (str != "" || str != null)){ $(".mailcontent").html(str); }else{ $(".mailcontent").html("<br/><span style='width:50%;height:30px;display:block;margin:0 auto;'>暫無資料</span>"); } }
js的點選全選,單選功能的實現
$(function() { //全域性的checkbox選中和未選中的樣式 $parentChexbox = $('.parent_check'), //全選 $dataBox = $('.dataBox'), //用於判斷全域性與子類的關係 $sonCheckBox = $('.son_check'); //單個子類選中 //全域性全選與單個的關係 $parentChexbox.click(function () { var $checkboxs = $dataBox.find('input[type="checkbox"]'); if ($(this).is(':checked')) { $checkboxs.prop("checked", true); } else { $checkboxs.prop("checked", false); } }); $(document).on('click', '.son_check', function (e) { //判斷:所有單個是否勾選 var $checkboxs = $dataBox.find('input[type="checkbox"]'); var len = $checkboxs.length; var num = 0; $checkboxs.each(function () { if ($(this).is(':checked')) { num++; } }); if (num == len) { $parentChexbox.prop("checked", true); } else { //單個取消勾選,全域性全選取消勾選 $parentChexbox.prop("checked", false); } }); });