简介全选，反选，单选

// 全选 $("#checkAll").click(function () {

    var cl = $(this).hasClass('action');
    if (!cl) {
        $(this).addClass('action');
        $('.tbodyClass').find('.formBox').addClass('action');
        $(".input").addClass('action');

    } else {
        $(this).removeClass('action');
        $('.tbodyClass').find('.formBox').removeClass('action');
        $(".input").removeClass('action');
    }
});
//单选
$(".tbodyClass .formBox").click(function () {
    var cl = $(this).hasClass('action');
    if (!cl) {
        $(this).addClass('action');
        $(this).parent().find('input').addClass('action')
    } else {
        $(this).removeClass('action');
        $(this).parent().find('input').removeClass('action')
    }

    // 反选
    var len = $(".tbodyClass tr").length;
    var actionLen = $("input.action").length;
    if (actionLen == len) {
        $("#checkAll").addClass('action');
    } else {
        $("#checkAll").removeClass('action');
    }
    
});

.case i{

    width: 12px;
    height: 12px;
    border: 1px solid #999;
    border-radius: 3px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 1px;
    background-color:#e7eaec;
}

.action{
    background: url("./xuanzhong1.png")center center no-repeat deepskyblue;
    background-size: 10px 10px;
    border: 1px solid #4b7aca;
}

 <label class="case">
            <input type="checkbox" name="sport" hidden>
            <i id="checkAll" checked="checked"></i>
  </label>全选
  <label class="case">
            <input type="checkbox" name="sport" hidden class="input" value='123' >
            <i checked="checked" class="formBox"></i>
    </label>

zhuanlan.zhihu.com/p/54452316 详情链接