<div>
<input type="radio" value="Red" />Red
<input type="radio" value="Yello" />Yello
<input type="radio" value="Blue" />Blue
</div>
<div>
<input type="checkbox" value="10 pt" />10 pt
<input type="checkbox" value="12 pt" />12 pt
<input type="checkbox" value="14 pt" />14 pt
</div>
<input type="button" value="Get Value" />
jQuery Code
复制代码 代码如下:
$(document).ready(function () {
$('#submitBtn').click(function () {
alert($('#colorRadio input:radio').val());
alert($('#sizeCheck input:checkbox').val());
});
});
效果
.val()返回的是匹配的元素集合中的第一个，有时你想返回选中的radio或checkbox的值，如果此时你只使用.val()方法，那么返回的将是第一个值，跟选中不选择中没有任何关系，就如上图所示，如果你想返回你选择的值，你就需要像下面这样操作，才能得到选中的值：
复制代码 代码如下:
$(document).ready(function () {
$('#submitBtn').click(function () {
alert($('input:radio[name=color]:checked').val());
alert($('input:checkbox[name=size]:checked').val());
});
});
此时单选(radio)将返回你选择中的值，但checkbox不是，如果你同时选中多个checkbox时.val()只会返回第一个选择中的值，如果没有选中任何值，此时将返加的是“undefined”。刚才说过对于“checkbox”有多个选中时，返加的将只是第一个值，如果需要全部返回，我们就需要使用each()对checkbox进行遍历
复制代码 代码如下:
$(document).ready(function () {
$('#submitBtn').click(function () {
alert($('input:radio[name=color]:checked').val());
$('input:checkbox[name=size]:checked').each( function() {
alert( $(this).val());
});
});
});
另外.val()在“select”时也分两种情况，当.val()方法应用在<select>元素上时，返回的是选中的值；另外一种情况是，当.val()方法应用在<select multiple="multiple">元素上时，返回的将是一个包含每个选中的 option 的数组。具体来看下面的一个例子。
HTML Markup
复制代码 代码如下:
<form action="" method="post">
<select>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</select>
<select multiple="multiple">
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</select>
<input type="button" value="Get Value" />
</form>
jQuery Code
复制代码 代码如下:
$("#getSelectValue").click(function(){
alert($("#dropdown").val());
var colors = $("#listbox").val();
for(var key in colors){
alert(colors[key]);
}
});
2、替换表单元素的Value值——.val(value)
语法
$("Element").val(value);//value表示的是：一个文本字符串或一个以字符串形式的数组来设定每个匹配元素的值。返回值jQuery对象
说明
这个方法常用来设置表单域的值，同样对于“<select multiple="multiple">”元素，多个option可以通过一个数组来选中。.val(value)可以同时改变选中元素的value值，而且其值是相同的，如：
复制代码 代码如下:
$("input").val("test");
上面代码最终会将所有inupt的value值替换成“test”，在平时的应用中我们一般是不这样使用的。.val(value)常应用在input[type="text"]的focus和blur上，如：
HTML Markup
复制代码 代码如下:
<input type="text" value="Hello,jQuery!" />
jQuery Code
复制代码 代码如下:
$("input:text").focus(function(){
var $inputTextVal = $(this).val();
if($inputTextVal == this.defaultValue) {
$(this).val("");
}
});
$("input:text").blur(function(){
var $inputTextVal = $(this).val();
if($inputTextVal == ""){
$(this).val(this.defaultValue);
}
});
3、使用一个回调函数来替换表单字段“value”的值
前面的.val(value)可以将选中的表单元素的value值改成相同的，那么我们往往是需要设置成不同的value值，此时我们就需使用这个方法，通过一个函数来设置这个值。这个函数通过两个参数，当前元素的所引值和它当前的值。
语法
$("Element").val(function(index,value){...});返回值jQuery对象
说明
使用这个函数的返回值来设置每个匹配的input元素的“value”值，下面我们来看一个checkbox和radio上的实例：
HTML Markup
复制代码 代码如下: