val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还有另外一个用处，就是它能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。

界面显示：

代码：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

    #select2{

        height: 140px;

        border: #000 1px solid;

    }

</style>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <meta charset="UTF-8">

</head>

<body>

    <input type="button" value="使单选下拉框的2号被选中" id="b1" /><br/>

    <input type="button" value="使多选下拉框选中的2号和5号被选中" id="b2" /><br/>

    <input type="button" value="使复选框的复选2和复选4被选中" id="b3" /><br/>

    <input type="button" value="使单选框的单选2被选中" id="b4" /><br/>

    <input type="button" value="打印已经被选中的值" id="b5" /><br/>

    <select id="select1">

        <option value="1hao">1号</option>

        <option value="2hao">2号</option>

        <option value="3hao">3号</option>

        <option value="4hao">4号</option>

    </select>

    <select multiple="multiple" id="select2">

        <option value="1hao">1号</option>

        <option value="2hao">2号</option>

        <option value="3hao">3号</option>

        <option value="4hao">4号</option>

        <option value="5hao">5号</option>

    </select>    <br/>

    <input type="checkbox" value="复选1" />复选1

    <input type="checkbox" value="复选2" />复选2

    <input type="checkbox" value="复选3" />复选3

    <input type="checkbox" value="复选4" />复选4

    <br/>

    <input type="radio" value="单选1" />单选1

    <input type="radio" value="单选2" />单选2

    <input type="radio" value="单选3" />单选3

    <script type="text/javascript">

    //***********使单选下拉框的2号被选中*******************

    $(document).ready(function(){

        $("#b1").click(function(){

            $("select#select1").val("2hao");

        });

    });

    //***********使多选下拉框选中的2号和5号被选中*******************

    $(document).ready(function(){

        $("#b2").click(function(){

            $("select#select2").val(["2hao","5hao"]);

        });

    });

    //***********使复选框的复选2和复选4被选中*******************

    $(document).ready(function(){

        $("#b3").click(function(){

            $(":input[type='checkbox']").val(["复选2","复选4"]);

        });

    });

    //***********使单选框的单选2被选中*******************

    $(document).ready(function(){

        $("#b4").click(function(){

            $(":input[type='radio']").val(["单选2"]);

        });

    });

    //***********打印已经被选中的值(单选框)*******************

    $(document).ready(function(){

        $("#b5").click(function(){

            alert($(":input[type='radio']:checked").val());

        });

    });

    </script>

</body>

</html>

参考文档：http://www.nowamagic.net/librarys/posts/jquery/25

【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]的更多相关文章

  1. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  2. jquery模拟下拉框单选框复选Select，Checkbox，Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  3. django框架 input 文本框 单选框 多选框 上传文件 等数据传输后台的程序 request.getlist接收多个结果 obj.chunks 用于文件传输 enctype="multipart/form-data文件传输必备表头

    在上一个博客中,我们学习了如果创建django,这里我们主要讲如何把数据传给后台 在url文件中, 从app01中导入views, 以及创建url(r'^login/', views.login) f ...

  4. JQuery 获取select 的value值和文本值

    <select name="month" id="selMonth">    <option value="1">一 ...

  5. jquery获得select option的值和对select option的操作

    <body> <select name="month" id="selMonth" onchange="set()"> ...

  6. 单选框radio改变事件详解（用的jquery的radio的change事件）

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  7. jquery获取选中select的文本,值等

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  8. jQuery 学习笔记（4）（文本值相关方法、操控CSS方法、位置和尺寸方法）

    1.文本值相关方法 .html() == .innerHTML $("div").html("<span> ...</span>") / ...

  9. jquery代码修改input的value值，而页面上input框的值没有改变的解决办法

    问题描述: 在搜索框中输入一些字符,并且点击搜索框右边的五角星做收藏操作时,打开的弹框中Save Search:后面的input中的值被赋值了外面搜索框的值,但是当此次操作完成之后,再次做同样的操作, ...

随机推荐

  1. Spring框架源码阅读之Springs-beans（一）容器的基本实现概述（待续）

    去年通过实际框架代码的阅读,以及结合<Spring源码深度解析>和<Spring技术内幕>的阅读,对Spring框架内Bean模块有了一个整体性的认识.对此进行的总结性整理和回 ...

  2. C#基础加强(1)之索引器

    索引器 介绍 索引器,初学者可能听起来有些陌生,但其实我们经常会用到它,例如: // 字符串的索引器 string str = "hello world"; ]; // 获取到字符 ...

  3. 【UML】NO.51.EBook.5.UML.1.011-【UML 大战需求分析】- 时序图（Timing Diagram）

    1.0.0 Summary Tittle:[UML]NO.51.EBook.1.UML.1.011-[UML 大战需求分析]- 时序图(Timing Diagram) Style:DesignPatt ...

  4. Deeplab v3+中的骨干模型resnet（加入atrous)的源码解析，以及普通resnet整个结构的构建过程

    加入带洞卷积的resnet结构的构建,以及普通resnet如何通过模块的组合来堆砌深层卷积网络. 第一段代码为deeplab v3+(pytorch版本)中的基本模型改进版resnet的构建过程, 第 ...

  5. Eclipse集成scala插件

    1.Eclipse中右击help,选择Eclipse Marketplace,搜索scala,一路点击安装,重启Eclipse. 2.新建工程,new->other->出现scala wi ...

  6. [MacOS] Genymotion***下载模拟器方法

    其它就不说了,我用的是某个工具. 将以下地址加入到白名单 https://cloud.genymotion.com http://dl.genymotion.com

  7. 用命令行打开sublime

    在linux下装了linux后默认并不能通过运行命令的方式打开,这就让我们不能像vim一样可以通过 vim <fileName> 来打开文件. 不过我们可以通过把sublime的执行文件放 ...

  8. 200. Number of Islands(DFS)

    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...

  9. 单端测序(Single-read)和双端测序(Paired-end和Mate-pair)的关系

    https://blog.csdn.net/hanli1992/article/details/82982434

  10. Shell脚本：while read line无法读取最后一行的问题

    [1]Shell脚本:while read line无法读取最后一行的问题 刚刚利用shell脚本处理日志文件时,发现了一个问题:while read line无法读取到最后一行 通过编辑器可以看到待 ...