前端 ----jQuery操作表單
阿新 • • 發佈：2018-08-23
gif mes 中項 timespan body 表單 屬性表 function box
表單控件是我們的重中之重，因為一旦牽扯到數據交互，離不開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操作表單