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>

posted on 2012-03-20 14:23  阿明007  阅读(181)  评论(0)  编辑  收藏  举报

导航