Html：实现checkbox全选、非全选、单选

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiao__jia__jia/article/details/83902136

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