表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开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()) ???????????????//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(‘试试就试试‘) ???????}) ???????</script>前端 ----jQuery操作表单
原文地址：https://www.cnblogs.com/liuafan/p/9525881.html