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数组合并方法array_merge + 排序array_multisort方法 array_unique数组去重 array_values数组索引值重新从0开始递增

    $dingdan = array_merge($jie_dingdan,$user_dingdan);//数组合并方法 $orderFile = array(); foreach($dingdan a ...

  2. React 学习之路 (一)

    先说一说对React的体验,总结 首先react相对angular来说入手简单暴力,在学习的这段时间里发现: 我们每天做的事就是在虚拟DOM上创建元素然后在渲染到真实的DOM中 渲染到真实DOM上的R ...

  3. str、tuple、dict之间的相互转换

    字符串.字典.元祖之间的相互转换: 1.字符串与列表之间的转换 str1 = 'ADMINphuang' '''str--->list''' list1=str1.split('p') prin ...

  4. linux安装jdk mysql

    mysql 安装进入到mysql官网 点击archives 选择版本下载tar linux 安装mysql数据库——tar.gz包解压安装法 mysql数据库有多种安装方式,本文只介绍在Linux服务 ...

  5. Win7 搭建Linux开发环境

    Vargant Vagrant 是一个基于 Ruby 的工具,用于创建和部署虚拟化开发环境.它使用 Oracle 的开源 VirtualBox 虚拟化系统,使用 Chef 创建自动化虚拟环境. 功能特 ...

  6. java框架之SpringBoot(9)-数据访问及整合MyBatis

    简介 对于数据访问层,无论是 SQL 还是 NOSQL,SpringBoot 默认采用整合 SpringData 的方式进行统一处理,添加了大量的自动配置,引入了各种 Template.Reposit ...

  7. Session实现原理分析

    http://www.jb51.net/article/77726.htm PHP第一次会话时会有Set-Cookie响应头返回,设置上PHPSESSID cookie Cache-Control: ...

  8. ASP.NET Core 之 Identity

    Claims:声明(证件单元)Identity:身份Principal:当事人Authentication :认证Authorization:授权 http://www.cnblogs.com/sav ...

  9. 关于view.py 中 ajax json 的用法

    1. data=models.Citys.objects.filter(upid=0) data 的数据形式是一个查询集(也是一个列表,查询出来的每一条数据是一个对象): <QuerySet [ ...

  10. python SyntaxError: Non-ASCII character '\xe6' in file

    [1]python程序执行报错 报错:SyntaxError: Non-ASCII character '\xe6' in file /tmp/788580473/main.py on line 7, ...