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. jquery截取地址栏中url参数的值

    <script> /*http://127.0.0.9/index.php?s=/Home/Index/fangguan_shuju&zc=2*/ function getQuer ...

  2. Python学习之旅（二十三）

    Python基础知识(22):进程和线程(Ⅰ) 1.多进程 (1)fork Python的os模块封装了常见的系统调用,其中就包括fork,可以在Python程序中轻松创建子进程 fork可以在Mac ...

  3. python-----python简介

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语言的编译器.Python这个名字,来自Guido所 ...

  4. JAVA 第四周学习总结

    20175303 2018-2019-2 <Java程序设计>第四周学习总结 教材学习内容总结 •用extends来定义一个类的子类. •Object类是所有类的祖先类. •如果子类和父类 ...

  5. kubernetes 1.3 使用skydns + kube2dns +etcd部署DNS服务器

    1. 直接从Docker中拉取skydns,kube2dns,etcd容器,放到一个Pod中 kube2sky:1.14 etcd:2.0.9 skydns-amd64 2. 创建RC apiVers ...

  6. NodeJS笔记（二）- 修改模块默认保存路径

    参考:nodejs prefix(全局)和cache(缓存)windows下设置 假设nodejs根目录为“D:\nodejs” 如下所示,新建“node_cache”文件夹用来存放全局缓存 该路径下 ...

  7. vue 安装cli3.0版本，创建项目

    注意:Vue CLI需要Node.js版本8.9或更高版本(建议使用8.11.0+). 查看node版本:node -v  , 查看npm 版本  npm -v, 1.首先需要安装node.js环境 ...

  8. SparkML之推荐引擎（一）---电影推荐

    本文将使用 SparkML 来构建推荐引擎. 推荐引擎算法大致分为 基于内容的过滤.协同过滤.矩阵分解,本文将使用基于属于矩阵分解的 最小二乘法 算法来构建推荐引擎. 对于推荐引擎模块这里将分为两篇文 ...

  9. python数据结构-如何让字典有序

    如何让字典有序 问题举例: 统计学生的成绩和名次,让其在字典中按排名顺序有序显示,具体格式如下 {'tom':(1, 99), 'lily':(2, 98), 'david':(3, 95)} 说明 ...

  10. cocos2d JS-(JavaScript) 冒泡排序

    思想: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了最 ...