Jquery知识点三 jquery表单对象操作_Javascript教程-查字典教程网
Jquery知识点三 jquery表单对象操作
Jquery知识点三 jquery表单对象操作
发布时间:2016-12-30 来源:查字典编辑
摘要:在Jquery中这三个函数如果有参数的话就是赋值操作,没有参数则是取值操作,其中val()是一个很重要的方法,和它相关的表单对象如:inpu...

在Jquery中这三个函数如果有参数的话就是赋值操作,没有参数则是取值操作,其中val()是一个很重要的方法,和它相关的表单对象如:input系的标签、select、textarea等都是用于和服务器端交互的标签元素,所以要搞清楚这个val();

对于radio、checkbox、select的赋值操作:

复制代码 代码如下:

$("input[name=a]").val(["娱乐1"]);

$("input[type=checkbox]").val(["篮球", "游戏"]);

$("select").val(["篮球", "游戏"]);

代码分析:

对radio赋值,属性选择器获取radio;

对checkbox赋值,属性选择器获取checkbox,赋值用中括号[],如果是多个值的话中间用逗号隔开;

对select赋值,通过标签选择器获取select,

对于radio、checkbox、select的取值操作:

复制代码 代码如下:

var checkvalue = "";

var s = $("input[name=a]:checked").val();

$(":checkbox:checked").each(function() {

checkvalue += $(this).val();

});

var selectvalue = "";

$("select :selected").each(function() {

selectvalue += $(this).val();

});

alert("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue);

代码分析:

声明一个s的变量用于接收name=a的radio的被选正的值,也可以写作var s=$(":radio:checked").val(),:radio可以理解为type=radio的input元素,是属性选择器的一种简化写法;

获取checkbox的被选中的值,因为checkbox是一个多选框,所以要用each对每一个选中项进行处理,也可以根据属性选择器写作: $("input[type=checkbox]:checked");

对于select当属性multiple ="multiple"时,可以多选,这里也用each进行遍历处理;

小结:

对于input系的标签元素我们可以使用属性选择器获取: $("input[type=checkbox]"),也可以通过简洁的方式: $(":checkbox"),类似的有:

:radio、:submit、:image、:reset、:button、:file、:hidden、:password、:text;

$(":input")选取所有的<input> <textarea> <select>和<button>元素

对于radio、checkbox获取被选正的项用:checked,而对于select则用:selected( $("select :selected")、 $(":radio:checked").val();)

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="../myjs/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>

<script type ="text/javascript" >

$(function() {

$(":button[value=取值]").click(function() {

var checkvalue = "";

//var s = $("input[name=a]:checked").val();

var s = $(":radio:checked").val();

$("input[type=checkbox]:checked").each(function() {

checkvalue += $(this).val();

});

var selectvalue = "";

$("select :selected").each(function() {

selectvalue += $(this).val();

});

alert("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue);

});

$(":button[value=设置]").click(function() {

$("input[name=a]").val(["娱乐1"]);

$("input[type=checkbox]").val(["篮球", "游戏"]);

$("select").val(["篮球", "游戏"]);

});

});

</script>

</head>

<body>

<input type ="checkbox" id="footbal" value="足球"/><label for ="footbal">足球</label><br />

<input type ="checkbox" value="篮球" />篮球<br />

<input type ="checkbox"value="看书" />看书<br />

<input type ="checkbox" value="游戏"/>游戏<br /><hr />

<input type ="radio" name ="a" id="b" value ="娱乐1" /><label for ="b">娱乐1</label><br />

<input type ="radio" name ="a" value ="娱乐2" />娱乐2<br />

<input type ="radio" name ="a" value ="娱乐3" />娱乐3<br />

<hr />

<select multiple ="multiple" >

<option value ="篮球">篮球</option>

<option value ="足球">足球</option>

<option value ="看书">看书</option>

<option value ="游戏">游戏</option>

</select>

<input type ="button" value="取值"/> <input type ="button" value="设置"/>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类