jquery中对表单的基本操作代码

复制代码 代码如下:

  <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 />

  复选框:<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);

  }

  }

  */

  /*获取复选框中选中的值的组合 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());

  单选框赋值 设置选中项

  $(":radio[name='sex']").val(["男"]);

  */

  /*获取复选框的值

  $(":checkbox[name='cc']:checked").each(function(i) {

  alert(this.value);

  });

  复选框赋值 选中这几项

  $(":checkbox[name='cc']").val(["1", "2", "3"]);

  */

  /*获取下拉列表的值

  alert($("#sel").val());

  获取下拉列表的文本

  alert($("#sel option:selected").text());

  */

  </script>

  </form>

  </body>

  </html>