jquery实现表格动态复选框的代码分享

程序员文章站 2022-05-26 15:28:51

...

本篇文章给大家分享的内容是jquery实现表格动态复选框的代码分享，有着一定的参考价值，有需要的朋友可以参考一下

效果如图
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>

jquery实现表格动态复选框的代码分享

jquery 实现复选框的全选操作实例代码

jQuery动态设置form表单的enctype值(实现代码)

jQuery实现动态生成表格并为行绑定单击变色动作的方法

vue+element UI实现树形表格带复选框的示例代码

jQuery Ajax实现Select多级关联动态绑定数据的实例代码

jQuery动态改变图片显示大小(修改版)的实现思路及代码

jQuery 利用ztree实现树形表格的实例代码

基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

jQuery操作复选框(CheckBox)的取值赋值实现代码

通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)