jquery表单操作

最新推荐文章于 2024-07-19 12:58:53 发布

cpf2016

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量389

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

（1）表单定义

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<form id="form">
	<div>
		姓名：
		<input type="text" name="name"/>
	</div>
	<div>
		年龄：
		<input type="text" name="age"/>
	</div>
	<div>
        性别：
		<select name="sex">
			<option value="0">男</option>
			<option value="1">女</option>
			<option value="2" selected="selected">保密</option>
		</select>
	</div>
	<fieldset>
		<legend>最喜欢的城市</legend>
		<div>
			<input type="radio" name="city" value="0"/><span>广州</span>
		</div>
		<div>
			<input type="radio" name="city" value="1"/><span>深圳</span>
		</div>
		<div>
			<input type="radio" name="city" value="2" checked="checked"/><span>上海</span>
		</div>
	</fieldset>
	<fieldset>
		<legend>喜欢的运动</legend>
		<div>
			<input type="checkbox" name="sports" value="0"/><span>足球</span>
		</div>
		<div>
			<input type="checkbox" name="sports" value="1"/><span>篮球</span>
		</div>
		<div>
			<input type="checkbox" name="sports" value="2"/><span>羽毛球</span>
		</div>
		<div>
			<input type="checkbox" name="sports" value="3"/><span>乒乓球</span>
		</div>
	</fieldset>
</form>
<div style="margin-top:20px;">
	<button id="btnSubmit">提交</button>
	<button id="btnReset">重置</button>
	<button id="btnFormValue">获取form的值</button>
</div>
</body>
</html>

（2）文本框text

1.获取值

         var val = $("input[name='age']").val();

2.设置值

        $("input[name='age']").val("88");

3.清空
也就是设置值为“”

        $("input[name='age']").val("");

（3）下拉框select

1.获取选择的项对应的值

          var val = $("select[name='sex']" option:selected).val();

2.获取选择的项对应的文本

          var val = $('select[name='sex'] option:selected').text();

3.设置选中项（通过value设置）

          $("select[name='sex']").val(0);

4 .设置某项内容的项被选中

          $("select[name='sex']").children("option:contains(保)").attr("selected","selected");

等效于：

          $("select[name='sex'] option:contains(保)").attr("selected","selected");

（4）单选框radio

1.获取选中项对应的值

var test = $(":radio[name='city']:checked").val();

2 .选中指定项

         $(":radio[name='city'][value=0]").attr("checked","checked");

（5）复选框checkbox

1.获取选中项的值

	var values = [];
	$(":checkbox[name='sports']:checked").each(function(){
		var val = $(this).val();
		values.push(val);
	});

2 .设置选中项

        $(":checkbox[name='sports'][value=0]").attr("checked",true);

3 .设置全选

$(":checkbox[name='sports']").attr("checked",true);

4 .设置全不选

$(":checkbox[name='sports']").attr("checked",false);

（6）表单操作

1.提交表单

$('#btnSubmit').click(function(){
    $('#form').submit();
});

2 .重置表单

$('#btnReset').click(function(){
    //由于jQuery没有提供reset方法，只能用form原生的reset方法。
    $('#form').get(0).reset();
});

3 .获取表单值

//获取form的值
$('#btnFormValue').click(function(){
    alert(decodeURIComponent($('#form').serialize()));
});

cpf2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery表单操作

（1）表单定义//提交$('#btnSubmit').click(function(){ $('#form').submit();});//重置$('#btnReset').click(function(){ //由于jQuery没有提供reset方法，只能用form原生的reset方法。 $('#form').get(0).reset();}
复制链接

扫一扫