zoukankan      html  css  js  c++  java
  • 获取checkbox选中项的值,全选及清空所有选中项

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

    </head>
    <body>

    <form action="#" method="post">
        <input type="checkbox" id="select"/> 全选<br/>
        <input type="checkbox" value="1" name="items"><br/>
        <input type="checkbox" value="2" name="items"><br/>
        <input type="checkbox" value="3" name="items"> <br/>
        <input type="checkbox" value="4" name="items"> <br/>
        <input type="checkbox" value="5" name="items"> <br/>
        <input type="checkbox" value="6" name="items"> <br/>
        <input type="checkbox" value="7" name="items"> <br/>
        <input type="checkbox" value="8" name="items"> <br/>
        <input type="checkbox" value="9" name="items"> <br/>
        <input type="checkbox" value="10" name="items"> <br/>
        <input type="checkbox" value="11" name="items"> <br/>

        <input type="submit" id="submit" value="提交">
    </form>

    <script>

    $(function() {
        $("#select").click(function() {
            if ($(this).attr("checked")) {
                    $("input[name=items]").each(function() {
                        $(this).attr("checked", true);
                    });
            } else {
                $("input[name=items]").each(function() {
                    $(this).attr("checked", false);
                });
            }
        });
        //得到选中的值,ajax操作使用
        $("#submit").click(function() {
            var text="";
            $("input[name=items]").each(function() {
                if ($(this).attr("checked")) {
                    text += ","+$(this).val();
                }
            });
            alert(text);
        });
    });
        
    </script>

    </body>
    </html>

  • 相关阅读:
    SQLite打开提示database disk image is malformed
    windows查看端口占用
    新浪SAE使用Thinkphp框架,禁用memcache节省豆子的方法
    Realtek 8168 安装 VMware ESXi 提示没有驱动
    13年国庆彩蛋
    Flex使用宋体渲染越南语显示错误
    微信 编码要UTF8
    WeiXin 验证成为开发者和更换服务器验证代码
    测试网络连通情况
    废弃sqlite代码,备查
  • 原文地址:https://www.cnblogs.com/muhy/p/13685941.html
Copyright © 2011-2022 走看看