zoukankan      html  css  js  c++  java
  • jQuery学习系列学会操纵Form表单元素(1)

    jQuery在使用过程中,经常需要从各种表单元素取值,例如:text、Checkbox、Radiobox、Select、Textarea等。他们的操作方式又不尽相同,下面给出一个取值的实例,供大家参考。运行代码前请下载好最新版本的jQuery,并放在代码中指定的路径中。

    <html><head><title>jQuery操纵Form表单元素(一)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <script language="javascript" type="text/javascript" 
                src="./common/jquery-1.4.4.min.js"></script>   
    <script type="text/javascript">
        $(document).ready(function () {
            $("#infoSubmit").click(function () {
                var info = '';
                info += '姓名:'+ $("#userName").val()+'\n';
                info += '兴趣:';
                var hobbys = $("input[type=checkbox][name='user.hobby']:checked");
                $(hobbys).each(function(i,item) {
                    info += $(item).attr("value")+';';
                });
                info += '\n';
                info += '性别:' + $("input[type=radio][name='user.sex']:checked").val() + '\n';
                info += '国籍:' + $("#userCountry").val() + '\n'; 
                info += '简介:' + $("#userIntroduce").val() + '\n';
                alert(info);
            });
        });
    </script>
    <style type="text/css">
        * {
            color:#2d2d2d;
            font-size:12px;
            line-height:150%;
        }
    </style>
    </head>
    <body>
        <form name="form1" action="#">
            <!--普通文本 -->
            姓名:<input type="text" name="user.name" id="userName"></input>        
            <br/>
            <!--checkBox-->
            兴趣:
            <input type="checkbox" name="user.hobby" value="足球">足球</input>
            <input type="checkbox" name="user.hobby" value="篮球">篮球</input>
            <input type="checkbox" name="user.hobby" value="羽毛球">羽毛球</input>
            <input type="checkbox" name="user.hobby" value="象棋">象棋</input>
            <br/>
            <!--radioBox-->
            性别:
            <input type="radio" name="user.sex" value="男" checked="checked"></input>
            <input type="radio" name="user.sex" value="女"></input>
            <br/>
            <!--select-->
            国籍:
            <select name="国籍" id="userCountry" name="user.country">
                <option value="">--请选择--</option>
                <option value="中国">中国</option>
                <option value="日本">日本</option>
                <option value="美国">美国</option>
                <option value="其他">其他</option>
            </select>
            <br/>
            <!--textArea-->
            简介:
            <textarea name="user.introduce" id="userIntroduce"></textarea>
            <br/>
            <input type="button" id="infoSubmit" value="提交"></input>
        </form>
    </body>
    </html>
  • 相关阅读:
    DockerFile体系结构
    Nignx(二) server_name 规则
    解决Redis分布式锁——死锁问题
    redis缓存穿透,缓存击穿,缓存雪崩原因+解决方案
    Docker_Linux
    正则例子
    部属流程
    Mysql insert语句的优化
    MySQL innodb_fast_shutdown参数讲解
    MySQL技术内幕InnoDB存储引擎(表&索引算法和锁)
  • 原文地址:https://www.cnblogs.com/treemanfm/p/2407880.html
Copyright © 2011-2022 走看看