表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作。

1.获取表单元素的值。
直接调用val()方法时可以获取选择器的 中的第一个元素的value值。例如:

$("[name=radioGroup]:checked").val;

以上代码直接获取属性为radioGroup的表单元素中被选中的value值,十分便捷。对于某些表单元素,例如<option><button>没有value值将获取其显示的文本值。
如果选择器中的第一个表单元素是多选的(例如下拉菜单),val()将返回由选中项value值组成的数组

http://www.cnblogs.com/ahthw/p/4221608.html使用过DOM的方式获取了单选和多选情况下的选值,相比jQuery,代码十分长。使用val()可以直接获取表单的元素值,不用考虑下拉菜单是单选还是多选。

<script type="text/javascript">
function displayVals() {
//直接获取选中项的value值
var singleValues = $("#constellation1").val();
var multipleValues = $("#constellation2").val() || []; //因为存在不选的情况
$("span").html("<b>Single:</b> " + singleValues + "<br><b>Multiple:</b> " + multipleValues.join(", "));
}
$(
function() {
//当修改选中项时调用
$("select").change(displayVals);
displayVals();
});
</script>

<select id="constellation1">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">双子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">双鱼</option>
</select>
<select id="constellation2" multiple="multiple" style="height:120px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">双子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">狮子</option>
<option value="Virgo">处女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">双鱼</option>
</select>

<span></span>

以上代码直接使用val()获取了select的值,jQuery方式大大的缩短了代码的长度。

2.设置表单元素的值。

与attr()和css()一样,val()也可以设置value的值,使用方法也大同小异。

    <script type="text/javascript">
$(
function() {
$(
"input[type=button]").click(function() {
var sValue = $(this).val(); //先获取按钮的value值
$("input[type=text]").val(sValue); //赋给文本框
});

});
</script>

<p>
<input type="button" value="Feed">
<input type="button" value="the">
<input type="button" value="Input">
</p>
<p>
<input type="text" value="click a button">
</p>

以上代码使用到了两次val()方法,一次是获取button的value值,另一次是将获取的文本赋值给input文本框里。

写博客不容易,欢迎大家给评论以给鼓励,分享是快乐!欢迎大家拍砖和点赞。(JavaScript、ajax、jQuery系列文章不断更新,关注我即可随时关注更新)

其他精彩文章

jQuery教程(29)-jQuery插件开发之为插件方法指定参数

jQuery教程(28)-jQuery插件开发之使用插件

jQuery教程(27)-jQueryajax操作之修改默认选项

jQuery教程(26)-ajax操作之使用JSONP加载远程数据

jQuery教程(25)-ajax操作之安全限制

更多关于android开发文章



更多相关文章

  1. 如何在Ajax.ActionLink中获取表单中的输入数据?
  2. 动态添加表单元素,将它们存储到MySQL并在将来更改/删除它们
  3. Ajax php登录表单不指向另一个页面
  4. 分享27款非常棒的 jQuery 表单插件
  5. 如何使用jQuery的叠加对话框作为反馈表单
  6. 用jQuery编写网页-表单检查
  7. jquery validate和jquery form 插件组合实现验证表单后AJAX提交
  8. 为什么在使用jquery读写表单输入时必须对字符串进行编码?
  9. 如何在进度条全屏表单界面上添加百分比状态

随机推荐

  1. 无法理解如何使用javascript和jquery代码
  2. 在不触发hashchange事件的情况下更改哈希
  3. 从事件监听器OnClick中排除按钮
  4. Ajax请求等到第一次AJAX调用未完成
  5. jQuery中$.get、$.post、$.getJSON和$.aj
  6. js或Jquery中判断字符串中是否有换行符或
  7. 如何使用javascript或jquery获取图像的自
  8. jQuery——将title属性用作悬停的文本,但
  9. 将AngularJS、jQueryUI、Angular-Drag-Dr
  10. 我需要从jquery ajax post中撤回数据并将