使用val()另一个妙用------选中select/checkbox/radio的值

最新推荐文章于 2023-01-02 08:56:13 发布

转载最新推荐文章于 2023-01-02 08:56:13 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanliyuan/p/3426937.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了jQuery中val()方法的功能及使用技巧，包括如何利用该方法获取和设置select（下拉列表框）、checkbox（多选框）和radio（单选框）等表单元素的值，并展示了清空元素内容的方法。

一直认为val()方法只有两个功能：1、能设置元素的值，2、获取元素的值。知道val()方法还有另外一个妙用，就是它能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。而你使用的$("select").val()并不是把所有选项的value显示出来,而是把选中项的value显示出来。

下面的2,4,6其实都是通过$("select").val()得到的，具体代码如下：

<script>
    $(function(){
        $("select").change(function(){
            var strHtml = $("select").val();
            $("#p1").text(strHtml);
        });
    });
</script>

既然能得到选中项的value,自然可以设置选中项
代码如下：

$("select").val("Item 3");

补充：在jquery中，val()方法中是从最后一个选项往前读取。而如果要设置多个属性的话

则是：$("select").val(["Item 3","Item 5"]);

当然用val()这样子实现，你也是可以用attr实现的~

而checkbox（多选框）和radio（单选框）也是以此类推~

本文仅个人所见，更详细见这儿

补充——val()不仅有此用途，还可以用来清空内容

$(selector).val() 这是获得元素的value

$(selector).val(value) 这是设置元素的value 故而当你在项目中想要清空某元素的内容，只要 $(selector).val(' ')就ok了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $("#btn").click(function(){
            $("#txtarea").val('');
            $("#txt").val('');
        });    
    });
</script>
</head>
<body>
    <textarea id="txtarea"  cols="23" rows="3">点击清空按钮后，内容全部清空</textarea>
    <input type="text"  id="txt"  value="点击清空按钮后，内容全部清空"/>
    <input type="button" id="btn" value="清空" />
</body>
</html>