使用Jquery实现,全选，复选，反选

需要注意的是：分别使用2个事件

父选择器用id选择器

子选择器用类选择器 <<<<>>>id选择器有唯一性

当然也可以定义onclick事件,父一个事件,所有子共同一个事件

代码没有写备注,有疑问可以在评论区提出，谢谢!

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="220px" height="300px">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>全选/全不选</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>A</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>B</td>
            </tr>
            <tr>

                <td><input type="checkbox" class="selectOne"></td>
                <td>C</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>D</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>E</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>F</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="selectOne"></td>
                <td>G</td>
            </tr>
        </tbody>
    </table>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
            $("#selectAll").change(function(){
                if($("#selectAll").prop("checked")){
                    $(".selectOne").prop("checked",true);
                }else{
                    $(".selectOne").prop("checked",false);
                }
            });
            $(".selectOne").change(function(){
                if(!(".selectOne").checked){
                    $("#selectAll").prop("checked",false);
                }
                var selectNum = $(".selectOne").length;
                var selectArr = $(".selectOne:checked").length;
                if(selectNum==selectArr){
                    $("#selectAll").prop("checked",true);
                }
            });
    </script>
</body>
</html>

使用Jquery实现,全选，复选，反选

猜你喜欢