勾选行变色和全选行变色

//单选行变色
function change(obj){

var tr= $(obj).parent().parent();
if(obj.checked){
tr.addClass("trbgopen");
}else{
tr.removeClass("trbgopen");
}
}
//全选
        queryallinput: function () {
            var inputs = document.getElementById("Payment_list_chekall")
            var tr = $(".Payment_list_chekone").parent().parent();
            if (inputs.checked == true) {
                $(".Payment_list_chekone").prop("checked", true);
                tr.addClass("trbgopen");//行变色
            } else {
                $(".Payment_list_chekone").prop("checked", false);
                tr.removeClass("trbgopen");
            }
        },
th:
<input type="checkbox" id="Payment_list_chekall" style="16px;height:16px" v-on:click="queryallinput()" />
tr:
<input type="checkbox" class="Payment_list_chekone" onclick="change(this)"/>

通过点击传入this,再得到父级的父级tr,然后判断当前传入的this.checked是否是选中来添加或移除行变色样式,

全选也是同理,判断所有的checked

//全选
function CheckBoxGroupExa(t, cla) {
    var c = "." + cla;
    if ($(t).prop("checked")) {
        $(c).prop("checked", true);
        //全选加上每行背景色
        $(c).parent().parent().addClass("changePE");
    } else {
        $(c).prop("checked", false);
        //取消全选去除每行背景色
        $(c).parent().parent().removeClass("changePE");

    }
}
//单击选中添加选中样式
$("#PaymentExamineList").on("click", "tr", function (e) {
    //如果选中按钮就不执行
    if($(e.target).parent()[0].className == 'exclusion' || $(e.target)[0].className == 'exclusion'){
        return;
    }
    var target;
    if (e.target.nodeName.toLowerCase() == "tr") {
        target = $(e.target);
    }
    else if (e.target.nodeName.toLowerCase() == "td") {
        target = $(e.target).parent();
    }
    else {
        target = $(e.target).parent().parent();
    }

    if (target.hasClass("changePE")) {
        target.removeClass("changePE");
        target.find("td:eq(0) > input").prop("checked", false);
        //只要有一个不选中,就把顶上的全选取消
        $("#PaymentExamineCheckAll").prop("checked", false);
    }
    else {
        target.addClass("changePE");
        target.find("td:eq(0) > input").prop("checked", true);
    }
    //判断是否单个全选,全选把顶上的全选框勾上
    var num = 0;
    $("#PaymentExamineList tr").each(function(index,item){
        if($(item).find("td:eq(0) > input").prop("checked")){
            num++;
        }
    })
    if(num==10){
        $("#PaymentExamineCheckAll").prop("checked", true);
    }
});
//获取数据取消全选,翻页时获取数据
$("#PaymentExamineCheckAll").prop("checked", false);
<input type="checkbox" id="PaymentExamineCheckAll" onclick="CheckBoxGroupExa(this, 'PaymentExamineCheckOne')">全选

<tbody id="PaymentExamineList" style="height:500px;">
        <tr style="height:30px;">
             <td width="2.7%"><input type="checkbox" class="PaymentExamineCheckOne" ></td>
             <td width="7.1%" style="border-right:none;" class="exclusion">
                <span data-bind="click:OpenPaymentExamineinfo.bind($data,PaymentMaster_ID)">详情</span>
             </td> 
        </tr>
</tbody>
原文地址:https://www.cnblogs.com/liufeiran/p/12614213.html