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. mui 窗口管理及窗口之间的数据传递

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. TX2-入门坑点-Ubuntu16.04任务栏消失

    问题:安装cuda过程中出现任务栏消失,快捷键失效的现象. 解决方法:重装桌面无法解决,使用cssm无法解决,最后删除home目录下的 .cache文件夹重启后解决

  3. vue的事件对象，方法执行

    方法都写在methods重,有两种写法:1. getMsg:function(){ alert(); },  这种写法就是对象中的方法 2. getMsg1(){ alert(); }注意没有func ...

  4. sql server中的charindex函数用法解析（在一段字符中搜索字符或者字符串-----返回expression1在expression2出现的位置；反之，返回0）

    https://blog.csdn.net/xinghuo0007/article/details/70651358 知识点一:charindex()语法 CHARINDEX ( expression ...

  5. JavaScript面向对象之get和set设置读写属性

    之前我们通过this和prototype申明的属性都是可读写的属性,如果想实现单独控制,就必须使用get和set存取期. 基本方法的 步骤一般包含两个步骤,1,使用var关键字定义一个私有属性作为中间 ...

  6. springboot+@async异步线程池的配置及应用

    示例: 1. 配置 @EnableAsync @Configuration public class TaskExecutorConfiguration { @Autowired private Ta ...

  7. [daily] 比端口转发更高级的ssh device tunnel转发

    没有什么能够阻挡,你对自由的向往. 场景: 我有一台设备Server100,在某一个f复杂的内网里,需要多次ssh跳转可以访问到.但是它不能直接访问internet. 我现在需要在我的ssh路径上,搭 ...

  8. Cocos 2dx项目lua调用OC出现卡死但不闪退的坑

    最近新上线的一个游戏,发现线上游戏有部分功能在点击的时候出现了没有反应的情况.通过调试源码,发现是原生OC的代码出现了崩溃,但是比较奇怪的是线上的Bugly没有任何记录,这个功能属于高频高能,而且又是 ...

  9. Linux之SSH免密登录

    实验方法: 开启两台虚拟机A和B,IP地址分别为192.168.222.12.192.168.222.10 在虚拟机A下做如下操作,生成公钥和密钥: [root@localhost ~]# ssh-k ...

  10. Spark MLlib之使用Breeze操作矩阵向量

    在使用Breeze 库时,需要导入相关包: import breeze.linalg._ import breeze.numerics._ Breeze创建函数 //全0矩阵 DenseMatrix. ...