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>

  • 相关阅读:
    实验17:NAT
    实验16:ACL
    实验15: STP
    实验14:VLAN间的路由
    实验13:VLAN/TRUNK/VTP/
    Linux软件管理--RPM工具
    Linux拓展练习部分--输入输出 / find部分 /基础拓展2
    linux文件管理--压缩打包
    find 文件查找
    防火墙知识点
  • 原文地址:https://www.cnblogs.com/muhy/p/13685941.html
Copyright © 2011-2022 走看看