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