表单控件是jQuery的重中之重,因为一旦牵扯到数据交互,就离不开form表单的使用,比如用户的登录注册功能等。
在进行操作input的value值的时候,主要使用jQuery的val()方法。
点击查看val()的使用方法
看如下代码:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="jquery.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????//一、获取值 ???????????//1.获取单选框被选中的value值 ???????????console.log($("input[type=radio]:checked").val()); ??????????????// 2.复选框被选中的value,获取的是第一个被选中的值, 如果没有值,将显示on ???????????console.log($("input[type=checkbox]:checked").val()); ???????????//3.下拉列表被选中的值 ???????????var obj = $("#timespan option:selected") ???????????????//获取被选中的值 ???????????console.log(obj.val()); ???????????????// 获取文本 ???????????console.log(obj.text()) ???????// 二、设置值 ???????????//1.设置单选按钮和多选按钮被选中项 ???????????$("input[type=radio]").val(["1"]); ???????????$("input[type=checkbox]").val(["sleep", "play"]); ???????????//2.设置下拉列表框的选中值,必须使用select ???????????//因为option只能设置单个值,当给select标签设置multiple, 那么我们设置多个值,就没有办法了。 ???????????//但是使用select设置单个值和多个值都可以。 ???????????$("selct").val(["2", "3"]); ???????????//3. 设置文本框的value值 ???????????$("input[type=text]").val("this is a test."); ????????}) ???</script></head><body> ???<form action="javascript:void(0)"> ???????<input type="radio" name="sex" value="1" />男 ???????<!-- 设置checked属性表示选中当前选项 --> ???????<input type="radio" name="sex" value="0" checked=""/>女 ???????????????<input type="checkbox" name="eat" value="eat" checked=""/>吃饭 ???????<input type="checkbox" name="sleep" value="sleep"/>睡觉 ???????<input type="checkbox" name="play" ?value="play" 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="请输入"> ???</form></body></html>
使用jQuery操作input的value值
原文地址:https://www.cnblogs.com/yang-wei/p/9534521.html