伪元素的点击事件

最新推荐文章于 2024-04-15 00:31:31 发布

wifi___

最新推荐文章于 2024-04-15 00:31:31 发布

阅读量511

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/watermelonmelon_/article/details/132057358

版权

运行环境： JQuery Js
其中页面显示的checkbox其实是一个伪元素。

<head>
    <title></title>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <script src="/static/js/xxx/common.js"></script>
</head>
...
<th align="left">
       <div class="xselection">
              <input type="checkbox" id="check_all"/>
              <label for="check_all" id="xh">批次名</label>
       </div>
</th>

在这里插入图片描述

尝试一

$(document).ready(function(){
    var allcheck = document.getElementById("check_all").checked;
    $("#xh").on('click',function(){
        $(".check_label").each(function () {
            this.checked = allcheck
        });
    })
    if(allcheck){
        $("#multiDel").removeClass("disabled")
    }else {
        $("#multiDel").addClass("disabled")
    }
});

发现只会在页面加载的时候过一遍此方法，后面点击不会触发。

尝试二

$("#xh").click(function (){
    $(".check_label").each(function () {
        $(this).checked(true)
    });
    $("#multiDel").removeClass("disabled")
    return false;
})

发现只会在页面加载的时候过一遍此方法，后面点击不会触发。

尝试三

window.onload = function(){
    document.getElementById("xh").addEventListener('click',function(){
        var allcheck = !document.getElementById("check_all").checked;
        $(".check_label").each(function () {
            this.checked = allcheck
        });
        if(allcheck){
            $("#multiDel").removeClass("disabled")
        }else {
            $("#multiDel").addClass("disabled")
        }
    });
}