jquery实现表格动态复选框的代码分享-js教程-PHP中文网

jquery实现表格动态复选框的代码分享
零到壹度
发布： 2018-04-09 16:58:44
原创
1742人浏览过
本篇文章给大家分享的内容是jquery实现表格动态复选框的代码分享，有着一定的参考价值，有需要的朋友可以参考一下
效果如图
这里写图片描述
<!DOCTYPE html><html><head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- 引入JQuery  bootstrap.js-->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script></head><body>
    <p class="container">
        <p class="col-md-7">
            <button id='addTypeBtn' class="btn btn-default btn-danger">添加</button>
            <button class="btn btn-default">保存</button>
            <table  class="table">
                <thead>
                    <tr>
                        <th><input id='checkAll' type="checkbox"/></th>
                        <th>姓名</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" placeholder="请输入姓名"  value="张三"/></td>
                        <td><input type="number" style="width: 40px" value="1"/></td>
                    </tr>
                    <tr>
                        <td><input type="text" placeholder="请输入姓名"  value="张三"/></td>
                        <td><input type="number" style="width: 40px" value="1"/></td>
                    </tr>
                    <tr>
                        <td><input type="text" placeholder="请输入姓名"  value="张三"/></td>
                        <td><input type="number" style="width: 40px" value="1"/></td>
                    </tr>
                </tbody>
            </table>
        </p>
    </p></body><script>

    $(function(){

        //初始化
        function initTable() {
            var checkAll = $('#checkAll');            var trs = $('tbody tr');            var tag = $('<td><input name="checkitem" type="checkbox"/></td>');
            trs.prepend(tag);            //得到tbody中的所有选框.
            var checks = $('input[name="checkitem"]');            //给全选框添加事件
            checkAll.on('click',function(event){
                if($(this).prop('checked') == false){ //全部取消
                    $('input[type="checkbox"]').prop('checked',false);
                }else{
                    $('input[type="checkbox"]').prop('checked',true);
                }
            });            //给每个单独的选择框加事件
            $('tbody').on('click',function(event){
                checks = $('input[name="checkitem"]');                if (event.target.name == 'checkitem'){                    if($(this).prop('checked') == false){
                    $(this).prop('checked',false);
                    }else{
                        $(this).prop('checked',true);
                    }                    //判断是否选满了
                    if(checks.length == $('tbody').find('input:checked').length){
                        checkAll.prop('checked',true);
                    }else{
                        checkAll.prop('checked',false);
                    }
                }
            });
        }

        initTable();        //新增点击事件
        $('#addTypeBtn').on('click', function () {
            var html = '';
            html += '<tr class="active">';
            html += '<td><input name="checkitem" type="checkbox"/></td>'
            html += '<td><input type="text" placeholder="请输入姓名"  value="张三"/></td>';
            html += '<td><input type="number" style="width: 40px" value="1"/></td>';
            html += '<td>';
            html += '</tr>';            var html = $(html)
            $('tbody').append(html);            //取消全选
            $('#checkAll').prop('checked',false);
        });
    });</script></html>
登录后复制