JQuery--学习总结

知识点一：操作复选框（全选，反选，取消）

HTML代码：

<body>
        <input type="button" onclick="CheckAll();" value="全选" />
        <input type="button" onclick="CheckReverse();" value="反选" />
        <input type="button" onclick="CheckCancel();" value="取消" />

        <table border="1" cellpadding="0" cellspacing="0" width="500" height="100">
            <thead></thead>
            <tbody id="tb1">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>ASP.Net MVC</td>
                    <td>ASP.Net MVC</td>
                    <td>ASP.Net MVC</td>
                </tr>

                <tr>
                    <td><input type="checkbox" /></td>
                    <td>ASP.Net MVC</td>
                    <td>ASP.Net MVC</td>
                    <td>ASP.Net MVC</td>
                </tr>

                <tr>
                    <td><input type="checkbox" /></td>
                    <td>ASP.Net MVC</td>
                    <td>ASP.Net MVC</td>
                    <td>ASP.Net MVC</td>
                </tr>
            </tbody>

        </table>

    </body>

JavaScript代码：

<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    //全选
    function CheckAll() {
        $(":checkbox").prop("checked", true);
    }
    //取消
    function CheckCancel() {
        $(":checkbox").prop("checked", false);
    }
    //反选
    function CheckReverse() {
        //循环遍历每一个复选框
        $(":checkbox").each(function() {
            //判断.如果选中就取消,反之选中
            if ($(this).prop("checked")) {
                $(this).prop("checked", false);
            } else {
                $(this).prop("checked", true);
            }
        })
    }
</script>

知识点二：each和map方法的使用（定义一个空数组，获取到所有复选框的值，通过each和map方法遍历，最后弹出）

HTML代码：

    <body>
        <input type="checkbox" value="0" />
        <input type="checkbox" value="1" />
        <input type="checkbox" value="2" />
        <input type="checkbox" value="3" />
        <input type="checkbox" value="4" />
    </body>

JavaScript代码：

<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    //each方法
    function testEach() {
        var arr = [];
        $(":checkbox").each(function(index) {
            arr.push(this.value);
        })
        var str = arr.join(",");
    }
    //map方法
    function testMap() {
        var str = $(":checkbox").map(function() {
            return this.value;
        }).get().join();
        alert(str);
    }
</script>

知识点三：复选框的操作（选择操作，把类型为Checkbox，同时可用的元素设置为“已选择”）

HTML代码：

<body>
    <input type="checkbox" id="ckb_1" />
    <input type="checkbox" id="ckb_2" disabled="true"/>
    <input type="checkbox" id="ckb_3" />
    <input type="checkbox" id="ckb_4" />
    <input type="button" id="btn"/>
</body>

JavaScript代码：

<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").click(function(){
            //方法一
            $("input[type='checkbox'][disabled!='disabled']").prop("checked",true);
            //方法二
            $("input:checkbox[disabled!='disabled']").prop("checked",true);
            //方法三
            $(":checkbox:enabled").prop("checked",true);
            //方法四
            $("input[type='checkbox']").each(function(){
                if($(this).attr("disabled")!="disabled"){
                    $(this).prop("checked",true);
                }
            })
        })
    })
</script>

总结一下：在判断属性时应该判断是“disabled”还是“enable”，而不是false或True，而设置属性都可以用！

知识点一：操作复选框（全选，反选，取消）

知识点二：each和map方法的使用（定义一个空数组，获取到所有复选框的值，通过each和map方法遍历，最后弹出）

知识点三：复选框的操作（选择操作，把类型为Checkbox，同时可用的元素设置为“已选择”）

猜你喜欢