val属性操作

Posted on Posted in js
Tips: 本文创建于2014年7月6日,已超过 2 年,内容或图片可能已经失效!

val属性value快捷操作方法

<input type=""text"" value=""XXX"" />
$().attr(‘value’); //获得value属性信息
$().attr(‘value’,’值’); //设置value的属性信息

$().val(); //获得元素节点的value属性信息
$().val(值); //设置value属性的信息
该方法对操作 复选框、下拉列表、单选按钮 有很好的体现。

[code lang="js"]
<script type="text/javascript">

function f1(){
//获得value属性信息
console.log($('#username').val()); //zhangsan
}
function f2(){
//修改设置value属性信息
$('#username').val('李四');
}

</script>
[/code]

val操作复选框

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
function f1() {
//获取复选框选定情况
//console.log($(".hobby").val()); //a
//console.log($(".hobby:checked").val()); //
//以上用法每次只获得一个value值

//console.log($(".hobby:checked"));
var len = $(".hobby:checked").length;

//$(".hobby:checked:eq(2)")//找到具体每个选中的项目
var rst = new Array();
for ( var i = 0; i < len; i++) {
//$(".hobby:checked:eq("+i+")")//当前被选中的项目
//获得每个项目的value值信息
//console.log($(".hobby:checked:eq("+i+")").val());
var row = $(".hobby:checked:eq(" + i + ")").val();
rst.push(row);
}
console.log(rst);//['a','c']
}
function f2() {
//设置复选框选定情况
//$(".hobby:eq(0)").attr('checked',true); //设置一个项目选中
//$(".hobby:eq(3)").attr('checked',true); //设置一个项目选中

//以下代码可以使得value属性=a 和d的两个复选框选中
$(".hobby").val([ 'a', 'd', 'b' ]);
}
</script>

<style type="text/css">
.apple {
width: 200px;
height: 150px;
background-color: pink;
}

.pear {
font-size: 25px;
}
</style>
</head>
<body>
<h2>val方法操作-复选框</h2>

<input type="checkbox" class="hobby" value="a" />篮球
<input type="checkbox" class="hobby" value="b" />音乐
<input type="checkbox" class="hobby" value="c" />上网
<input type="checkbox" class="hobby" value="d" />游戏
<br />
<br />

<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>
[/code]
val 操作下拉列表
[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link style="text/css" rel="stylesheet" href="12.css" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">

function f1(){
//获取下拉列表选定情况
//传统方式是遍历全部option、判断是否有selected、获得value值
console.log($("select").val()); //选定一个或多个项目都可以获得具体value值
}
function f2(){
//设置下拉列表选定情况
//$().val(数组);
$("select").val([2,4]);
}

</script>

<style type="text/css">
.apple {width:200px; height:150px; background-color:pink;}
.pear { font-size:25px;}
</style>
</head>

<body>
<h2>val方法操作-下拉列表</h2>

<select multiple="multiple">
<option value=0>请选择</option>
<option value=1>小学</option>
<option value=2>初中</option>
<option value=3>高中</option>
<option value=4>大学</option>
</select>
<br /><br />

<input type="button" value="获取" onclick="f1()" />
<input type="button" value="设置" onclick="f2()" />
</body>
</html>
[/code]
val 操作单选按钮
[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link style="text/css" rel="stylesheet" href="12.css" />
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
function f1() {
//获取单选按钮选定情况
console.log($(".sex:checked").val());
}
function f2() {
//设置单选按钮选定情况
//$().val(数组);
$(".sex").val([ '女' ]);
}
</script>

<style type="text/css">
.apple {
width: 200px;
height: 150px;
background-color: pink;
}

.pear {
font-size: 25px;
}
</style>
</head>

<body>
<h2>val方法操作-单选按钮</h2>
<input type="radio" name="sex" class="sex" value="男">男 <input
type="radio" name="sex" class="sex" value="女">女 <input
type="radio" name="sex" class="sex" value="保密">保密 <br />
<br /> <input type="button" value="获取" onclick="f1()" /> <input
type="button" value="设置" onclick="f2()" />
</body>
</html>
[/code]
val 复选框全选-全不选-反选
[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link style="text/css" rel="stylesheet" href="12.css" />
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
function f1() {
//全选效果
//把全部复选给遍历以下,给每个项目设置checked属性即可
//在jquery里边使用,无需遍历,方法attr内部已经把遍历给封装好了
$(".hobby").attr('checked', true);
}
function f2() {
//全不选
$(".hobby").attr('checked', false);
}

function f3() {
//反选
//遍历每个项目,判断每个项目选定情况,选定就取消,未选定就给设置选定
var len = $(".hobby").length;

for ( var i = 0; i < len; i++) {
//$(".hobby:eq("+i+")")代表当前每个复选框按钮
var flag = $(".hobby:eq(" + i + ")").attr('checked');
$(".hobby:eq(" + i + ")").attr('checked', !flag);
/*if(flag){
$().attr('checked',false);
} else {
$().attr('checked',true);
}
*/
}
}
</script>

<style type="text/css">
.apple {
width: 200px;
height: 150px;
background-color: pink;
}

.pear {
font-size: 25px;
}
</style>
</head>

<body>
<h2></h2>
<input type="checkbox" class="hobby" value="a" />篮球
<input type="checkbox" class="hobby" value="b" />音乐
<input type="checkbox" class="hobby" value="c" />上网
<input type="checkbox" class="hobby" value="d" />游戏

<br />
<br />

<input type="button" value="全选" onclick="f1()" />
<input type="button" value="全不选" onclick="f2()" />
<input type="button" value="反选" onclick="f3()" />
</body>
</html>
[/code]

» 转载请注明来源:呢喃 » val属性操作

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × 3 =