jquery cheched 全选/全不选

Posted 安心牧羊人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery cheched 全选/全不选相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <title>Jquery复选框练习</title>
        <!-- 引入jQuery,引入你自己的jQuery文件 -->
        <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
    </head>

    <body>
        <div>
            <p>选择要购买的水果</p>
            <ul class="fruit">
                <li><input type="checkbox" value="001" />苹果</li>
                <li><input type="checkbox" value="002" />雪梨</li>
                <li><input type="checkbox" value="003" />芒果</li>
                <li><input type="checkbox" value="004" />菠萝</li>
            </ul> <input type="checkbox" id="All" /> <button id="checkAll">全选</button> <button id="nothing">
                全不选</button> <button id="reverseAll">反选</button> <button class="chooseFruit">购买</button>
            <script type="text/javascript">
                <!-- 选择全部/全不选 -->
                $("#All").click(function(){ if("this.checked"){
                    $("#fruit :checkbox").prop("checked", true);
                }else{
                    $("#fruit :checkbox").prop("checked", false);
                }
                });
                <!--选择全部-->
                $("#checkAll").click(function(){ $("#fruit :checkbox").prop("checked", true); });
                <!--全不选-->
                $("#nothing").click(function(){ $("#fruit :checkbox").prop("checked", false); });
                <!--反选--> $("#reverseAll").click(function(){ $("#fruit :checkbox").each(function(i){
                    $(this).prop("checked",
                    !$(this).prop("checked"));
                });
                });
                <!--获取选中复选框的值--> $(".chooseFruit").click(function(){
                    var arr = new Array();
                    $("#fruit :checkbox[checked]").each(function(i){
                        arr[i] = $(this).val();
                    });
                    var vals = arr.join(",");
                    console.log(vals); });
            </script>
        </div>
    </body>

</html>
















































以上是关于jquery cheched 全选/全不选的主要内容,如果未能解决你的问题,请参考以下文章

jQuery全选全不选反选

jquery全选反选全不选代码

jquery全选全不选反选

用jQuery实现(全选反选全不选功能)

jquery实现全选全不选

jQuery实现复选框全选全不选反选问题解析