jQuery使用之（四）处理页面的表单元素

深藏阁楼爱情的钟 2022-08-05 16:20 130阅读 0赞

表单是一个特殊的页面元素，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][http_www.cnblogs.com_ahthw_p_4221608.html]使用过DOM的方式获取了单选和多选情况下的选值，相比jQuery，代码十分长。使用val()可以直接获取表单的元素值，不用考虑下拉菜单是单选还是多选。

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

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

2.设置表单元素的值。

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

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

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

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

**其他精彩文章**

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

## [jQuery教程(28)-jQuery插件开发之使用插件][jQuery_28_-jQuery] ##

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

## [jQuery教程(26)-ajax操作之使用JSONP加载远程数据][jQuery_26_-ajax_JSONP] ##

## [jQuery教程(25)-ajax操作之安全限制][jQuery_25_-ajax] ##

更多关于[android开发][android]文章

[http_www.cnblogs.com_ahthw_p_4221608.html]: http://www.cnblogs.com/ahthw/p/4221608.html
[copycode.gif]: /images/20220806/07ae6ce3190c4d8ea7a6154446cfee0d.png
[jQuery_29_-jQuery]: http://www.itmmd.com/201501/519.html
[jQuery_28_-jQuery]: http://www.itmmd.com/201501/518.html
[jQuery_27_-jQueryajax]: http://www.itmmd.com/201501/515.html
[jQuery_26_-ajax_JSONP]: http://www.itmmd.com/201501/512.html
[jQuery_25_-ajax]: http://www.itmmd.com/201501/511.html
[android]: http://www.itmmd.com/mobile.html

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 Web(四)构建Web表单-对表单元素分组

第1关\_分组元素相关的概念 ![02f541a39f534e41b0f5999e6c0061a9.png][] 第2关\_对表单元素分组编程要求根据提

r囧r小猫/ 2023年09月24日 14:44/ 0 赞/ 71 阅读

相关 jquery表单属性筛选元素

$(":button") 选择所有按钮元素类型为按钮的元素。等于$('input\[type="button"\]') $(":checkbox") 选择所有

男娘i/ 2023年06月11日 05:23/ 0 赞/ 18 阅读

相关 HTML5之表单元素的使用

<!DOCTYPE html> <meta charset=utf-8 /> <title>forms</title> <style type="text/css"

我不是女神ヾ/ 2022年09月19日 12:03/ 0 赞/ 343 阅读

相关 JQuery：各种操作表单元素方法小结

来源：[http://www.ido321.com/1220.html][http_www.ido321.com_1220.html] [![Center][]][http_

清疚/ 2022年08月14日 01:40/ 0 赞/ 166 阅读

相关 JQuery：各种操作表单元素方法小结

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-la

绝地灬酷狼/ 2022年08月06日 17:24/ 0 赞/ 158 阅读

相关 jQuery使用之（五）处理页面的事件

在之前dom操作中提到了javascript对事件处理的介绍。由于不同浏览器处理事件各不相相同，这给开发者带来了不必要的麻烦，jQuery的方便的解决了这个方面的麻烦。 1.

太过爱你忘了你带给我的痛/ 2022年08月06日 11:24/ 0 赞/ 123 阅读

相关 jQuery使用之（三）处理页面的元素

对于页面的元素，在DOM编程中可以通过各种查询、修改手段进行管理，非常麻烦。jQuery提供了一整套的方法来处理页面的元素。包括元素的内容、复制、移动和替换等。本节将

ゝ一世哀愁。/ 2022年08月06日 11:17/ 0 赞/ 164 阅读

相关 jQuery使用之（四）处理页面的表单元素

表单是一个特殊的页面元素，value的值是最受关注的，jQuery提供了强大的val()方法来处理相关的操作。 1.获取表单元素的值。直接调用val()方法时可以获取选

深藏阁楼爱情的钟/ 2022年08月05日 16:20/ 0 赞/ 131 阅读

相关 JQuery 判断页面表单元素是否变更

`change 函数实现的是对文本、下拉框的判断，对复选框的操作尚未实践。 //使用jQuery实现` `$(` `"myform :input"` `).change(`

淡淡的烟草味﹌/ 2022年07月13日 02:18/ 0 赞/ 257 阅读

相关 jQuery之表单验证

1、HTML布局 ![70][] ![70 1][] 2、页面美化 ![70 2][] 3、JavaScript ![70 3][] ![

待我称王封你为后i/ 2022年05月21日 10:22/ 0 赞/ 200 阅读