表单控件是我们的重中之重, 因为一旦牵扯到数据交互, 离不开 form 表单的使用, 比如用户的注册登录功能等
那么通过上节知识点我们了解到, 我们在使用 jquery 方法操作表单控件的方法:
$(selector).val()// 设置值和获取值
看如下 html 结构:
- lang="en">
- charset="UTF-8">
- action="">
type="radio" name="sex" value="112" /> 男
type="radio" name="sex" value="11" checked="" /> 女
type="radio" name="sex" value="11" />gay
type="checkbox" value="a" checked=""/> 吃饭
type="checkbox" value="b" /> 睡觉
type="checkbox" value="c" checked=""/> 打豆豆
- name="timespan" id="timespan" class="Wdate">
- value="1">8:00-8:30
- value="2" selected="">8:30-9:00
- value="3">9:00-9:30
- type="text" name=""id="" value="111" />
页面展示效果:
操作表单控件代码如下:
- type="text/javascript" src="jquery-3.3.1.js">
- type="text/javascript">
- $(function(){
- // 一, 获取值
- //1. 获取单选框被选中的 value 值
- console.log($('input[type=radio]:checked').val())
- //2. 复选框被选中的 value, 获取的是第一个被选中的值
- console.log($('input[type=checkbox]:checked').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']);
- $('input[type=checkbox]').val(['a','b']);
- //2. 设置下拉列表框的选中值, 必须使用 select
- /* 因为 option 只能设置单个值, 当给 select 标签设置 multiple.
- 那么我们设置多个值, 就没有办法了, 但是使用 select 设置单个值和多个值都可以
- */
- $('select').val(['3','2'])
- //3. 设置文本框的 value 值
- $('input[type=text]').val('试试就试试')
- })
来源: http://www.bubuko.com/infodetail-2631186.html