jquery表格删除添加信息

<style>
        div {
            width: 500px;
            line-height: 30px;
            font-size: 18px;
            margin: 20px auto;
            border: 1px solid #000;
            padding: 20px;
            box-sizing: border-box;
        }
 
        button {
            float: right;
        }
 
        table {
            margin: 10px auto;
            /* 相邻边框合并 */
            border-collapse: collapse;
            text-align: center;
        }
    </style>

 <div class="box">
        姓名:
        <input type="text"><br>
        性别:
        <input type="radio" name="sex" id="" value="男" checked>男
        <input type="radio" name="sex" id="" value="女" checked>女<br>
        年龄:
        <input type="text"><br>
        <button>add</button>
    </div>
    <table border="1" width="500">
        <thead>
            <th>
                <input type="checkbox" name="" id="choose">全选
            </th>
            <th>name</th>
            <th>sex</th>
            <th>age</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>张三</td>
                <td>men</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>李四</td>
                <td>men</td>
                <td>29</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>王五</td>
                <td>women</td>
                <td>20</td>
            </tr>
        </tbody>
        <br>
            <button>remove</button>
    </table>

<script>
        //添加按钮的事件
        var $btn =$('button')
        $btn.eq(0).click(function(){
            var res =$('<tr>\
                <td>\
                <input type="checkbox" name="" id=""></td>\
                <td>\
                '+$(':text').eq(0).val()+'</td>\
                <td>\
                '+$(':radio:checked').val()+'</td>\
                <td>\
                '+$(':text').eq(1).val()+'</td>\
            </tr>')
            console.log(res);
            $('tbody').append(res);
            // console.log(1);
        });

        //删除按钮的事件
        $btn.eq(1).click(function(){
            $('tbody :checkbox:checked').parents('tr').remove();
        })

        //是否全选事件
        $('tbody').on('click',':checkbox',function(){
             if($('tbody :checkbox:checked').length==$('tbody :checkbox').length){
                // console.log($('thead :checkbox')[0].checked);
                $('thead :checkbox').prop('checked',true)
            }else{
                $('thead :checkbox').prop('checked',false)
            }
        })

          //全选选框事件
        $('thead :checkbox').click(function(){
            if($('#choose').is(':checked')){
                $('tbody :checkbox').prop('checked',true);
            }else{
                $('tbody :checkbox').prop('checked',false)
            }
        })

        


        // 知识点:
        // $(':checkbox'),选中所有的复选框
        // $(':text'),选中所有的单行文本输入框
        //$(':radio'),选中所有的单选框
        //$(':radio:checked'),选中被选中的单选框
        //$(':checkbox:checked'),选中被选中的复选框
       // $('#choose').is(':checked'),获取选框的状态,返回布尔值
    </script>