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. PHP（css样式）

    布局页面的时候 大色块 小色块 ...(就是宽高) 内容布局:浮动,定位,显示,层级 浮动:float(样式名):值:left right设一个父标签,设定宽高,里面随便浮动!!!!!!!!!!!!! ...

  2. DBMS_METADATA.set_transform_param格式化输出

    DBMS_METADATA.set_transform_param格式化输出获得DDL --输出信息采用缩排或换行格式化 EXEC DBMS_METADATA.set_transform_param( ...

  3. 18.1-uC/OS-III等待多个内核对象

    等待的多个内核对象是指多值信号量和消息队列的任意组合 . 如果想要使用“等待多个内核对象”,就必须事先使能“等待多个内核对象”.“等待多个内核对象” 的使能位于“os_cfg.h”. 1.OSPend ...

  4. docker容器与镜像

    就像cad图层概念 数据卷就是为了完成数据持久化操作

  5. python pynput监听键盘

    """小白随笔,大佬勿喷""" #键盘输入 from pynput.keyboard import Key,Controller,Liste ...

  6. 在 .Net Core1.0 上使用Mysql 的EFcore

    https://www.codeproject.com/Articles/1218348/Using-EF-Core-with-MySQL-in-DotNet-Core

  7. 关于Mysql数据库的学习总结

    关于Mysql操作指令: 1.键盘win + R 弹出windows运行输入框,输入cmd命令,进入windows数据库;   2.在windows数据库里输入mysql(数据库) -uroot(用户 ...

  8. python全栈第一章

    第一章 Python基础变量定义规则:1.变量名只能是字母数字或者下划线的任意组合2.变量名的第一个字符不能是数字3.关键字不能申明为变量名定义方式:1.驼峰体AgeOfSzp2.下划线隔开Age_o ...

  9. UI框架搭建DAY1

    分析:UI框架主要是为了用户(使用框架的程序猿)更快捷.方便地开发UI,UI框架的好处还在于解耦,使得程序更具有灵活性. UI框架的核心是窗口的管理,窗口管理的主要任务就是显示窗口和关闭窗口. 因为窗 ...

  10. tf.InteractiveSession()和tf.Session()

    tf.InteractiveSession()适合用于python交互环境 tf.Session()适合用于源代码中 1.tf.InteractiveSession() 直接用eval()就可以直接获 ...