jQuery学習ノート(1)
29807 ワード
HTML、テキスト、値の設定と取得
val()メソッド:
1.ラジオボックス
View Code
2.チェックボックス
View Code
3.ラジオドロップダウン
View Code
4.複数選択ドロップダウン・ボックス
View Code
val()メソッド:
1.ラジオボックス
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
4 <script type="text/javascript">
5 $(function () {
6
7 //$(":radio").val(["radio3"]);
8
9 //
10 $("[value=radio3]:radio").attr("checked","true");
11
12 });
13
14
15 </script>
16 <title></title>
17 </head>
18 <body>
19 <form id="form1" runat="server">
20 <div>
21 <input type="radio" value="radio1" /> 1
22 <input type="radio" value="radio2" /> 1
23 <input type="radio" value="radio3" /> 3
24 </div>
25 </form>
26 </body>
27 </html>View Code
2.チェックボックス
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
4 <script type="text/javascript">
5 $(function () {
6
7 $(":checkbox").val(["ck3", "ck2"]);
8
9 //
10 $("[value=ck4]:checkbox").attr("checked", "true");
11 });
12
13
14 </script>
15 <title></title>
16 </head>
17 <body>
18 <form id="form1" runat="server">
19 <div>
20 <input type="checkbox" value="ck1" /> 1
21 <input type="checkbox" value="ck2" /> 2
22 <input type="checkbox" value="ck3" /> 3
23 <input type="checkbox" value="ck4" /> 4
24 </div>
25 </form>
26 </body>
27 </html>View Code
3.ラジオドロップダウン
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
4 <script type="text/javascript">
5 $(function () {
6
7 //$("#single").val(" 2 ");
8
9 //
10 $("#single option:eq(2)").attr("selected","true");
11
12 });
13
14
15 </script>
16 <title></title>
17 </head>
18 <body>
19 <form id="form1" runat="server">
20 <div>
21 <select id="single">
22 <option> 1 </option>
23 <option> 2 </option>
24 <option> 3 </option>
25 </select>
26 </div>
27 </form>
28 </body>
29 </html>View Code
4.複数選択ドロップダウン・ボックス
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script>
4 <script type="text/javascript">
5 $(function () {
6
7 $("#multiple").val([" 3 ", " 4 "]);
8
9 });
10
11
12 </script>
13 <title></title>
14 </head>
15 <body>
16 <form id="form1" runat="server">
17 <div>
18 <select id="multiple" multiple="multiple" style="height: 120px;">
19 <option selected="selected"> 1 </option>
20 <option> 2 </option>
21 <option> 3 </option>
22 <option> 4 </option>
23 <option selected="selected"> 5 </option>
24 </select>
25 </div>
26 </form>
27 </body>
28 </html>View Code