表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开form表单的使用，比如用户的注册登录功能等

那么通过上节知识点我们了解到，我们在使用jquery方法操作表单控件的方法：

$(selector).val()//设置值和获取值

看如下HTML结构：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form action="">

            <input type="radio" name="sex"  value="112" />男

            <!-- 设置cheked属性表示选中当前选项 -->

            <input type="radio" name="sex"  value="11" checked="" />女

            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃饭

            <input type="checkbox" value="b" />睡觉

            <input type="checkbox" value="c" checked=""/>打豆豆

    <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->

            <select name="timespan" id="timespan" class="Wdate"   >

                <option value="1">8:00-8:30</option>

                <option value="2" selected="">8:30-9:00</option>

                <option value="3">9:00-9:30</option>

            </select>

            <input type="text" name="" id="" value="111" />

    </form>

</body>

</html>

页面展示效果：

操作表单控件代码如下：

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

    <script type="text/javascript">

        $(function(){

            // 一、获取值

                //1.获取单选框被选中的value值

                console.log($('input[type=radio]:checked').val())

                //2.复选框被选中的value,获取的是第一个被选中的值

                console.log($('input[type=checkbox]:checked').val())
　　　　　　　　　　
　　　　　　　　　　console.log($('#timespan option:selected').val());  //获取到的是第二个值 因为你规定了取值的selected
　　　　　　　　　　console.log($('#timespan option').val());  //获取到第一个值 因为是从第一个开始获取的
//3.下拉列表被选中的值 var obj = $("#timespan option:selected"); // 获取被选中的值 var time = obj.val(); console.log(time); // 获取文本 var time_text = obj.text(); console.log("val:"+time+" text"+ time_text ); //4.获取文本框的value值 console.log($("input[type=text]").val())//获取文本框中的值 // 二.设置值 //1.设置单选按钮和多选按钮被选中项
　　　　　　　　　　$('input[type=radio]').val(['112']); //对所有type都是radio的value的值是112的为你选中的input
　　　　　　　　　　// $('input[type=radio]').val(['112']);
　　　　　　　　$('input[type=checkbox]').val(['a','b']); //这个是选中value是  a  和b 的input
//2.设置下拉列表框的选中值，必须使用select /*因为option只能设置单个值，当给select标签设置multiple。 那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以 */ $('select').val(['3','2']) //3.设置文本框的value值 $('input[type=text]').val('试试就试试') }) </script>

.

使用jQuery操作input的value值的更多相关文章

  1. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  2. 05-使用jQuery操作input的value值

    表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用jquery方法操作表单控件的方法: $(selector ...

  3. jQuery系列（五）：jQuery操作input的value值

    表单控件是重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等. jQuery操作表单控件的方法: $(selector).val()//设置值和获取值 1.实例代码 ...

  4. jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...

  5. jQuery操作input改变value属性值

    今天写了一个表单元素,在用户点击的时候会清空input中的内容,当鼠标点击其他地方的时候会把输入的值保存为input的value值 类似于这样的效果 当用户点击的时候文字消失. html代码 < ...

  6. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  7. Jquery获取input=text 的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery操作input值总结

    获取选中的值获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本var item = $ ...

  9. JQuery 操作input

    获取选中的值 获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item ...

随机推荐

  1. linux 安装python

    wget https://www.python.org/ftp/python/3.6.0/Python-3.6.0.tgz #下载安装包 tar zxvf Python-3.6.0.tgz #解压 . ...

  2. uvm_cmdline_processor

    无意中看到uvm_cmdline_processor,之前使用+UVM_TESTNAME也没深究,现在记录一下 内部调用脚本中的参数,通过使用uvm_cmdline_processor可以从脚本层级, ...

  3. Java框架-mybatis03使用注解实现mybatis

    1.面向接口编程: 好处:扩展性好,分层开发中,上层不用管具体的实现,都遵循共同的标准,使得开发变得容易.规范性更好 2.注解的实现 a)编写Dao接口 public interface UserDa ...

  4. 对Map的一些总结

    1:Map接口. Collection体系中存储的是单个元素,单身汉,而Map中存储的是2个元素,存储的是成对的元素. Map和Collection是没有联系的!!不要以为Map是Collection ...

  5. Python基础(7) - 函数

    Python 函数是一个能完成特定功能的代码块,可在程序中重复使用,减少程序的代码量和提高程序的执行效率.在python中函数定义语法如下: def function_name(arg1,arg2[, ...

  6. Spark中自定义累加器Accumulator

    1. 自定义累加器 自定义累加器需要继承AccumulatorParam,实现addInPlace和zero方法. 例1:实现Long类型的累加器 object LongAccumulatorPara ...

  7. 远程连接postgresql和redis设置

    1. 让Postgresql服务器被远程访问 1.1 编辑 pg_hba.conf,配置用户的访问权限 vi /etc/postgresql/8.4/main/pg_hba.conf 增加设置项 ho ...

  8. 虚拟机centos笔记整理，持续更新~~

    远程拷贝文件:scp -r 文件名 主机名:完整路径名(冒号不能少)拷贝当前windows系统的文件到当前目录:rz -y 查找文件:updatedb 修改数据库locate 文件名 即可查找文件

  9. 资料汇总--Web前端

    01.前端技能汇总 02.gitHub优秀前端资料分享 03.大前端 HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 1. <!DOCTYPE> 声明位于文档中的 ...

  10. 转发与重定向的区别(forward与redirect的区别)

    转发:服务器接收到客户端的请求后,在服务器内部传递的过程.最后回复结果给客户端. 重定向:服务器接收到客户端的请求后,回复一个新url给客户端,客户端跳转新url.