laravel全选，反选，全不选

最新推荐文章于 2023-05-10 10:50:01 发布

原创最新推荐文章于 2023-05-10 10:50:01 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

php基础篇同时被 3 个专栏收录

28 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

laravel框架

5 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的表格数据展示方法，并提供了全选、反选及全不选的功能。通过简单的前端技术即可实现对表格中复选框的选择控制。

 <table border="1">
        <tr>
            <td></td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>科目</td>
            <td>分数</td>
        </tr>
        @foreach($arr as $v)
            <tr>
                <td><input type="checkbox" name="box" value="{{$v['s_id']}}"></td>
                <td>{{$v['name']}}</td>
                <td>{{$v['sex']}}</td>
                <td>{{$v['age']}}</td>
                <td>{{$v['dept']}}</td>
                <td>{{$v['grade']}}</td>
            </tr>
            @endforeach
    </table>
    <input type="button" value="全选" onclick="qx()">
    <input type="button" value="反选" onclick="fx()" name="all">
    <input type="button" value="全不选" onclick="qbx()">
   
<script src="../jquery.js"></script>
<script>
    //全选
    function qx(){
        var box=document.getElementsByName('box');
//        alert(box);
        for(var i=0;i<=box.length;i++){
            box[i].checked=true;
        }
    }

    //全不选
    function qbx(){
        var box=document.getElementsByName('box');
//        alert(box);
        for(var i=0;i<=box.length;i++){
            if(box[i].checked=true){
                box[i].checked=false;
            }
        }
    }

    //反选
    function fx(){
        var box=document.getElementsByName('box');
        for(var i=0;i<=box.length;i++){
           box[i].checked= !box[i].checked;
        }
    }

   
</script>