.html(),.text()和.val()的使用(3)_H5之家 - 中国HTML5教程资源分享第一站

.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

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

<form action=""> <div> <input type="radio" value="Red" /><span>Red</span> <input type="radio" value="Yellow" /><span>Yellow</span> <input type="radio" value="Blue" /><span>Blue</span> </div> <div> <input type="checkbox" value="10 pt" /><span>10 pt</span> <input type="checkbox" value="12 pt " /><span>12 pt</span> <input type="checkbox" value="14 pt" /><span>14 pt</span> </div> <input type="text" disabled="disabled" /> <input type="button" value="Set Value" /> </form>

jQuery Code

$(document).ready(function(){ $("input:radio[name=color]").val(function(index,oldVal){ return "color-" + (index+1) + ":" + oldVal; }); $("input:checkbox[name=size]").val(function(index,oldVal){ return "size-" + (index+1) + ":" + oldVal; }); $("#setValue").click(function(){ var $msg = $("input:radio[name=color]:checked").val() + ","; $("input:checkbox[name=size]:checked").each(function(){ $msg += $(this).val() + ","; }); $("#txtBox").val($msg); }); });

对于多选择下接框，我们可以这样来改变：

HTML Markup

<select> <option>Red</option> <option>Yellow</option> <option>Blue</option> </select> <select multiple="multiple"> <option>Red</option> <option>Yellow</option> <option>Blue</option> </select>

jQuery Cody

$(document).ready(function () { $('#dropdown').val('Yellow'); $('#listbox').val(['Red', 'Blue']); });

上面介绍了.val()的具体使用方法，那么我们什么情况下可以使用.val()方法呢？

这节主要学习了jQuery中的.html(),.text()和.val()三种方法的使用，最后总结一下这三个方法：

这三个方法功能上的对比

如需转载烦请注明出处：W3CPLUS