tofacebook.com -专业IT技术社区 jquery cheched 全选/全不选 Web程序 - tofacebook.com-专业IT技术社区
137°

jquery cheched 全选/全不选 Web程序

标签:tle   put   function   type   click   pos   title   false   val   

<!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 全选/全不选

标签:tle   put   function   type   click   pos   title   false   val   

原文地址:https://www.cnblogs.com/gerry/p/8688601.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: