勾选行变色和全选行变色

//单选行变色
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>

勾选行变色和全选行变色

相关推荐