jquery html form

重要表单元素：

表单元素	说明
<input type="text" />	单行文本框
<input type="password" />	密码文本框，用户在该文本框输入字符时将被替换成显示为*号
<input type="hidden" />	隐藏标签，用于在表单中以隐含方式提交变量值
<input type="file" />	文件浏览框，当文件上传时，可用来打开一个模式窗口以选择文件
<input type="checkbox" />	复选框，允许用户选择多个选择项
<input type="radio" />	单选按钮，用于设置一组选择项，用户只能选择一个
<input type="submit" />	表单提交按钮
<input type="reset" />	清除与重置表单内容，用于清除表单中所有文本框的内容，而且使选择菜单项恢复到初始值
<input type="button" />	普通按钮
<select></select>	下拉列表框，可单选和多选。默认为单选，如果增加多选择功能，增加<select name="select" size="自定义列数" multiple="multiple">即可
<option></option>	列表下拉菜单，和select配合使用，显示供选择的值
<textarea></textarea>	多行文本框，在使用文本框时需要关闭标签之间的文本内容，形成如下格式：<textarea>你的文字</textarea>

 

测试表单：

<form id="myForm">
    <table>
        <input type="hidden" id="UserID" name="UserID" value="0" />
        <tr>
            <td align="right">用户名：</td>
            <td><input type="text" id="UserName" name="UserName" /></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input type="password" id="Password" name="Password" /></td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td>
                <input type="radio" id="Sex" name="Sex" value="male"/>男
                <input type="radio" id="Sex" name="Sex" value="female"/>女
            </td>
        </tr>
        <tr>
            <td align="right">爱好：</td>
            <td>
                <input type="checkbox" name="Hobby" value="0" checked="checked" />上网
                <input type="checkbox" name="Hobby" value="1" />看书
                <input type="checkbox" name="Hobby" value="2" />游戏
                <input type="checkbox" name="Hobby" value="3" />运动
            </td>
        </tr>
        <tr>
            <td align="right">出生地：</td>
            <td>
                <select name="Place" id="Place">
                    <option value="0">湖南省</option>
                    <option value="1">湖北省</option>
                    <option value="2">江苏省</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">上传头像：</td>
            <td>
                <input type="file" name="HeadImage" />
            </td>
        </tr>
        <tr>
            <td align="right">备注：</td>
            <td>
                <textarea id="Remark" name="Remark"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="reset" value="重置"/><input type="submit" value="确认"/></td>
        </tr>
    </table>
</form>

Select:

1.获取下拉菜单选中项的文本

$("#Place option:selected").text();
$("#Place option[selected]").text();
$("#Place").text();//获取所有下拉菜单的文本

2.获取和设置下拉菜单的值

$("#Place").val();//获取,当前选中项的值
$("#Place").val(2);//设置,将value=2的option设置为选中

3.清空下拉菜单(删除select下的所有option标签)

$("#Place").empty();
$("#Place").html("");

4.给下列菜单添加元素

$("#Place").append('<option value="3">江西省</option>');
$('<option value="3">江西省</option>').appendTo($("#Place"));

Radio:

1.获取单选按钮值

$("#Sex:checked").val()
$("#Sex[checked]").val()

2.设置单选按钮值

$("#Sex[value='male']").attr("checked",true);//选择 
$("#Sex[value='male']").attr("checked",false);//取消选择
$("#Sex[value='male']").removeAttr("checked");//取消选择,所有的单选按钮都会被取消选择，不推荐使用

3.判断单选按钮是否选中

if($("#Sex[value='male']").attr("checked")){}//判断选中
if($("#Sex[value='male']").attr("checked")==true){}//判断选中
if($("#Sex[value='male']").attr("checked")==undefined){}//判断未选中

CheckBox:

1.设置复选框的值

$("input[name='Hobby'][value='1']").attr("checked",true);//选中name='Hobby',value='1'的复选框，true选中，false不选中.

2.全选、全不选

$("input[name='Hobby']:checkbox").attr("checked",true);//true全选,false全不选
$("input[name='Hobby'][type=checkbox]").attr("checked",true);

3.反选

$("input[type=checkbox][name='Hobby']").each(function(){
    $(this).attr("checked",!$(this).attr("checked"));
}) 

Text、Hidden、Password、TextArea：

1.获取值

$("#UserID").val();//hidden
$("#UserName").val();//text
$("#Password").val();//password
$("#Remark").val();//textarea

2.设置值

$("#UserID").val(3);//hidden
$("#UserName").val("YeChun");//text
$("#Password").val("123");//password
$("#Remark").val("Hello");//textarea

Form：

1.清空表单

$("#myForm")[0].reset();//与重置按钮功能一样，hidden的值不会被清除，select、radio、checkbox会回到初始状态。
$('#myForm input,textarea,select')
　　.not(':button, :submit, :reset,:hidden')
　　.val('')
　　.removeAttr('checked')
　　.removeAttr('selected'); //效果同上、但是灵活可扩展

 

ps：http://www.cnblogs.com/yechun/archive/2012/03/15/YeChun.html