jQuery+JS实现复选框的选中与取消

效果展示
复选框的选中与取消之后的效果

代码展示
这是CSS样式

<style type="text/css">
        .odd{
            background-color: antiquewhite;
        }
        .even{
            background-color: aquamarine;
        }
        .checked{
            background-color: yellow;
        }
        table,table,tr,td{
            border: 1px solid;

        }
        td{
            width: 100px;
            height: auto;
        }
    </style>

这是HTML代码

<table>
    <caption>员工信息</caption>
    <tr style="background-color: silver">
        <td></td>
        <td>姓名</td>
        <td>薪水</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox"/></td>
        <td>张三</td>
        <td>20000</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox"/></td>
        <td>李四</td>
        <td>22000</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox"/></td>
        <td>王五</td>
        <td>14000</td>
        <td>26</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox"/></td>
        <td>马六</td>
        <td>15000</td>
        <td>21</td>
    </tr>
</table>

这是JS代码

<script type="text/javascript">
    $(function(){
        $("tr:odd").addClass("odd");
        $("tr:even").addClass("even");
        $(":checkbox").on("click",function(){
            $(this).parent().parent().toggleClass("checked");
        });
    });
</script>

这就是上面效果的主要代码了，当然jQuery的引入就不主说了。