jquery第十期:表單的操作

最後更新：2013-11-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>表單操作</title>  <script type="text/javascript" src="jquery-1.10.1.js"></script>  <script type="text/javascript">      $(function()  {  //通過val方法，可以設定表單的值，其參數可以String/ Function/ Array,這裡是一個String  $("#username").val("請輸入明戶名");  });  </script> </head> 使用者名稱:<input type="text" name="username" id="username"/><br/> 密碼  :<input type="password" name="password" id="password"/><br/> 性別  :<input type="radio" name="sex">男        <input type="radio" name="sex">女<br/> 愛好  :<input type="checkbox" name="interest" value="Dota">Dota        <input type="checkbox" name="interest" value="LOL">LOL<input type="checkbox" name="interest" value="夢三國">夢三國<input type="checkbox" name="interest" value="英雄三國">英雄三國<br/><input type="button" value="click" id="btn">   <body>  </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>表單操作</title>  <script type="text/javascript" src="jquery-1.10.1.js"></script>  <script type="text/javascript">      $(function()  {   //第一中設定設複選框選中的方法  //$("input[type='checkbox']").attr("checked","checked"); // 第二種設定複選框選中的方法,並且禁用複選框  $("input[type='checkbox']").prop("checked",true);  $("input[type='checkbox']").prop("disabled",true);  });  </script> </head> 使用者名稱:<input type="text" name="username"  id="username"/><br/> 密碼  :<input type="password" name="password" id="password"/><br/> 性別  :<input type="radio" name="sex">男        <input type="radio" name="sex">女<br/> 愛好  :<input type="checkbox" name="interest" value="Dota">Dota        <input type="checkbox" name="interest" value="LOL">LOL<input type="checkbox" name="interest" value="夢三國">夢三國<input type="checkbox" name="interest" value="英雄三國">英雄三國<br/><input type="button" value="click" id="btn">   <body>  </body></html>

運行結果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title>表單操作</title>  <script type="text/javascript" src="jquery-1.10.1.js"></script>  <script type="text/javascript">      $(function()  {//添加新的option，設定selected為selected$("#province").append("<option value='4' selected='selected'>河南省</option>");//尋找選中的元素$("select option:selected");  });  </script> </head> 使用者名稱:<input type="text" name="username"  id="username"/><br/> 密碼  :<input type="password" name="password" id="password"/><br/> 性別  :<input type="radio" name="sex">男        <input type="radio" name="sex">女<br/> 愛好  :<input type="checkbox" name="interest" value="Dota">Dota        <input type="checkbox" name="interest" value="LOL">LOL<input type="checkbox" name="interest" value="夢三國">夢三國<input type="checkbox" name="interest" value="英雄三國">英雄三國<br/> 省份：<select id="province">         <option>請選擇省份</option>         <option value="1">黑龍江</option> <option value="2">河北</option> <option value="3">山東</option>       </select><br>   <input type="button" value="click" id="btn">   <body>  </body></html>

運行結果：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More