jquery中對表單的基本操作代碼

2019-11-21 00:19:51

字體：大中小

供稿：網(wǎng)友

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="../conn/jsfile/jquery.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
文本框 ：<input type="text" id="txt" value="txt" /><br /> 
單選按鈕：<input type="radio" value="男" checked="checked" name="sex" />男 <input type="radio" value="女" name="sex" checked="checked"/>女<br /> 
復(fù)選框：<input type="checkbox" value="1" name="cc"/>1<input type="checkbox" value="2" checked="checked" name="cc" />2<input type="checkbox" value="3" checked="checked" name="cc" />3<br /> 
下拉框： 
<select id="sel" style="width: 100px"> 
<option value="yi">1</option> 
<option value="er" selected="selected">2</option> 
<option value="san">3</option> 
</select> 
<script language="javascript" type="text/javascript"> 
/*------------------------------------------------javascript-------------------------------------------*/ 
/* 獲取文本框的值 
alert(document.getElementById("txt").value); 
*/ 
/*獲取單選按鈕的值 
var radios = document.getElementsByName("sex"); 
var n = radios.length; 
for (var i = 0; i < n; i++) { 
if (radios[i].checked) { 
alert(radios[i].value); 
} 
} 
*/ 
/*獲取復(fù)選框中選中的值的組合 1,2,3,4 
var checkboxs = document.getElementsByName("cc"); 
var n = checkboxs.length; 
for (var i = 0; i < n; i++) { 
if (checkboxs[i].checked) { 
alert(checkboxs[i].value); 
} 
} 
*/ 
/*獲取下拉列表的選中項的值 
方法一： 
alert(document.getElementById("sel").value); 
方法二： 
var sel = document.getElementById("sel"); 
alert(sel.options[sel.selectedIndex].value); 
*/ 
/*------------------------------------------------jquery-------------------------------------------*/ 
/*獲取文本框的值 
alert($("#txt").val()); 
*/ 
/*獲取單選框選中項的值 
alert($(":radio[name='sex']:checked").val()); 
單選框賦值 設(shè)置選中項 
$(":radio[name='sex']").val(["男"]); 
*/ 
/*獲取復(fù)選框的值 
$(":checkbox[name='cc']:checked").each(function(i) { 
alert(this.value); 
}); 
復(fù)選框賦值 選中這幾項 
$(":checkbox[name='cc']").val(["1", "2", "3"]); 
*/ 
/*獲取下拉列表的值 
alert($("#sel").val()); 
獲取下拉列表的文本 
alert($("#sel option:selected").text()); 
*/ 
</script> 
</form> 
</body> 
</html> 