<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>12.3jQuery属性与样式之.val()</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1 .val()相当于JS中的value
$('#btn1').click(function(){
//.val(),返回元素值
alert($('#username').val());
//alert($('#username').attr('value'));
});
//2 更改文本框中的值
$('#btn2').click(function(){
//.val(参数)设置文本框中的内容
$('#username').val('bbb');
//$('#username').attr('value','ccc');
});
//3 获取单选按钮(被选中的也就是有checked属性)的值
$('#btn3').click(function(){
//$('input[type="radio"][name="sex"]:checked').val();
alert($('input[type="radio"][name="sex"]:checked').val());
});
//4 设置单选按钮的被选中
$('#btn4').click(function(){
//获取单选按钮
var $radio = $(':radio[name="sex"]');
//alert($radio.length);
//$radio.first().attr('checked',true);
//找到第一元素并更改checked属性值为true
//$radio.eq(0).attr('checked','true');
$radio.eq(0).attr('checked','checked');
});
//5 获取复选按钮的值
$('#btn5').click(function(){
//获取所有复选按钮
var $checkbox = $(':checkbox');
//alert($checkbox.length);//5个
//获取被选中的复选按钮
var $checkboxSelect = $(':checkbox:checked');
//alert($checkboxSelect.length);//3个
alert( $checkboxSelect.val());//跑步
//返回被选中的第一个元素的值
});
//6 设置复选按钮的值
$('#btn6').click(function(){
//方法1：
//获取复选框
var $check = $(':checkbox');
//设置复选框的值
//.val(['值1','值2','值3','值4'])
//.val(参数),参数是数组
//$check.val(['游泳','射箭','唱歌']);
//方法2：(用的较多)
$check.eq(1).attr('checked','checked');//设置选中
$check.eq(3).attr('checked',true);//设置选中
$check.eq(4).attr('checked',false);//取消选中
});
//7 获取单选列表值
$('#btn7').click(function(){
//获取列表对象
var $singlist = $('#single');
alert($singlist.val());
});
//8 设置单选列表值
$('#btn8').click(function(){
var $slist = $('#single');
$slist.val('共青团员');
});
//9 获取多选列表值
$('#btn9').click(function(){
var $mlist = $('#mul');
alert($mlist.val());
//获取被选中元素的值
});
//10 设置多选列表值
$('#btn10').click(function(){
var $mlist = $('#mul');
$mlist.val(['英语','计算机','历史']);
});
//11 多行文本框测试
$('#btn11').click(function(){
//alert($('#mask').val());
$('#mask').val("多行文本框添加内容。");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="获取文本框的值">
<br>
<input type="button" id="btn2" value="设置文本框的值">
<br>
用户名：
<input type="text" id="username" value="aaa"><br>
<input type="button" id="btn3" value="获取单选按钮值"><br>
<input type="button" id="btn4" value="设置单选按钮值"><br>
性别:
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked='checked'>女
<br>
<input type="button" id="btn5" value="获取复选按钮值"><br>
<input type="button" id="btn6" value="设置复选按钮值"><br>
爱好:<br>
<input type="checkbox" value="跑步" checked>跑步<br>
<input type="checkbox" value="游泳" >游泳<br>
<input type="checkbox" value="射箭" checked>射箭<br>
<input type="checkbox" value="唱歌" >唱歌<br>
<input type="checkbox" value="跳舞" checked>跳舞<br>
<input type="button" id="btn7" value="获取单选列表值"><br>
<input type="button" id="btn8" value="设置单选列表值"><br>
政治面貌:
<select id="single">
<option value="共产党员">共产党员</option>
<option value="共青团员">共青团员</option>
<option value="群众" selected>群众</option>
</select>
<br>
<input type="button" id="btn9" value="获取多选列表值" ><br>
<input type="button" id="btn10" value="设置多选列表值" ><br>
擅长课程:
<select id="mul" multiple>
<option value="英语">英语</option>
<option value="数学" selected>数学</option>
<option value="计算机">计算机</option>
<option value="物理" selected>物理</option>
<option value="历史">历史</option>
</select>
<br>
<input type="button" id="btn11" value="测试">
备注:
<textarea cols="10" rows="3" id="mask">测试测试
</textarea>
</body>
</html>
