js全选全不选 添加 删除案例 （新手推荐）

 新手学习案例 重点★ 

适合刚入手js代码的同学们，此案例掺杂多种效果，可以更好的帮助大家快速学习记忆巩固相关知识点。

 css代码如下

    <style>
        #form {
            width: 480px;
            margin: 30px auto;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            line-height: 30px;
            position: relative;
        }

        button {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #tab {
            width: 500px;
            margin: 30px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        /*input[type]  属性选择器  选择input标签，并且有type属性input标签*/
        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/

        input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        #div1 {
            position: relative;
            width: 480px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>

 body代码如下

    <div id="form">
        请输入姓名: <inp