HTML、JQ+JS表单全选单选效验与删除选中

花~盗

于 2021-12-12 11:12:30 发布

阅读量691

点赞数 2

分类专栏： JS+JQ 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/ypf3442354429/article/details/121884574

版权

JS+JQ 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该代码主要使用了removeChild(子元素删除)方法与循环(for)及if(判断)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选删除</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<table border="1px solid black">
    <tbody>
    <tr>
        <td><input type="checkbox" class="one">全选</td>
        <td>手机</td>
        <td>价格</td>
        <td>处理器</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="two"></td>
        <td>iphone13</td>
        <td>6999</td>
        <td>A15</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="two"></td>
        <td>华为p50</td>
        <td>5999</td>
        <td>麒麟9000</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="two"></td>
        <td>真我GT neo 2</td>
        <td>2169</td>
        <td>晓龙870</td>
    </tr>
    <tr style="display: none" class="first">
        <td colspan="4" style="text-align: center">暂无数据</td>
    </tr>
    <tr style="cursor: pointer" class="second">
        <td colspan="4" style="text-align: center">删除</td>
    </tr>
    </tbody>
</table>
</body>
<script>
    $(document).ready(function () {
        //获取所有按钮
        var button=document.getElementsByTagName("input");
        //全选按钮
        $(".one").click(function () {
            if (this.checked===true){
                for (let i = 0; i < button.length; i++) {
                    button[i].checked=true;
                }
            }else {
                for (let i = 0; i < button.length; i++) {
                    button[i].checked=false;
                }
            }
        });
        //单选于全选的联动
        $(".two").click(function () {
            //声明一个用于存储单选按钮的元素
            var num=0;
            //先判断该按钮是否选中
            if (this.checked===false){
                button[0].checked=false;
            }
            //循环判断
            for (let i = 1; i < button.length; i++) {
                if (button[i].checked===true){
                    num++;
                }
            }
            if (num===button.length-1){
                button[0].checked=true;
            }
        });
        //删除
        $(".second").click(function () {
            //循环判断删除
            for (let i = button.length-1; i > 0; i--) {
                if (button[i].checked===true){
                    button[i].parentNode.parentNode.parentNode.removeChild(button[i].parentNode.parentNode);
                }
                if (button.length===1){
                    button[0].checked=false;
                    $(".first").show();
                }
            }
        })
    })
</script>
</html>

花~盗

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML、JQ+JS表单全选单选效验与删除选中

该代码主要使用了removeChild(子元素删除)方法与循环(for)及if(判断)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选删除</title> <script type="text/javascript" src="js/jquery.js"></script> &lt
复制链接

扫一扫