1 <%@ page contentType="text/html; charset=UTF-8"%>
2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <script type="text/javascript" src="<c:url value='/system/script/jquery-1.11.1.js'/>"></script>
7 <%-- <link rel="stylesheet" type="text/css" href="<c:url value='/system/css/bootstrap.css'/>"/> --%>
8 <style type="text/css" ></style>
9 <script>
10 $(document).ready(function() {
11 //获得单选按钮的value,text
12 $("[name='radioGroup']").on("change",function() {
13 var radioValue = $(this).val();
14 var radioText = $(this).parent().text();
15 $("#radioText").text("单选按钮的value："+radioValue + ",text:" + radioText);
16 });
17 //获得多选按钮的value,text
18 $("[name='checkGroup']").on("change",function() {
19 var array = new Array();
20 var arrayName = [];
21 $("[name='checkGroup']:checked").each(function(){
22 var cbVal = $(this).val();
23 var cbText = $(this).next().text();
24 array.push(cbVal);
25 arrayName.push(cbText);
26 });
27
28 $("#checkBoxText").text("多选按钮的val：" + array.join(",") + ",text:" + arrayName);
29 if ($("[name='checkGroup'][value='1']").is(':checked')) {
30 $("#checkBoxText1").text("多选按钮1被选中");
31 } else {
32 $("#checkBoxText1").text("");
33 }
34 });
35 //获得select的值
36 $("[name='selectGroup']").on("change",function() {
37 $("#selectText").text($(this).val() + ":" + $(this).find("option:selected").text());
38 });
39
40 $("[name='selectGroup1']").on("change",function() {
41 $("#selectText1").text($(this).val() + ":" + $(this).find("option:selected").text());
42 });
43
44 $("[name='selectGroup']").select(function() {
45 alert("qqq");
46 });
47
48 $("[name='selectGroup']").on("aaa", function() {
49 alert("aaa");
50 });
51
52 $("[name='selectGroup']").on("bbb", function (event, param) {
53 console.log(event);
54 alert(param.name);
55 });
56 });
57
58 //设置单选按钮的值
59 function setRadioVal(){
60 $("[name='radioGroup']").each(function() {
61 if($(this).val() == "2") {
62 $(this).prop("checked", true);
63 }
64 });
65 }
66 //设置多选按钮的值
67 function setCheckboxVal(){
68 $("[name='checkGroup']").each(function() {
69 $(this).prop("checked", false);
70 if($(this).val() == "2") {
71 $(this).prop("checked", true);
72 }
73 });
74 }
75 //设置下拉框的值
76 function setSelectVal(){
77 //$("[name='selectGroup']").val("2"); 设置下拉框的值
78 //这里可以看到，如果直接使用jquary去给select赋值，并不会触发他的change事件，这不是我想要的，所以就有了trigger方法；
79 //$("[name='selectGroup']").val("2").trigger("change");这样我们就可以触发change事件了
80
81 // $("[name='selectGroup']").val("2").trigger("select");
82
83 // $("[name='selectGroup']").val("2").trigger("aaa");
84
85 // jquary 自定义函数
86 var param = {};
87 param.name = "张三"
88 $("[name='selectGroup']").val("2").trigger("bbb", param);
89
90 }
91
92 //设置多选下拉框的值
93 function setManySelectVal() {
94 $("[name='selectGroup1'] option").each(function() {
95 if($(this).val() == "1" || $(this).val() == "2") {
96 $(this).attr("selected", true);
97 }
98 });
99 }
100 </script>
101 //设置单选按钮的值 change()不会有反应？
102 </head>
103 <body>
104 <label><input type="radio" name="radioGroup" value="1" />单选按钮1</label>
105 <label><input type="radio" name="radioGroup" value="2" />单选按钮2</label>
106 <button onclick="setRadioVal();">设置单选按钮的值为2</button>
107 <br>
108 <font color="red" id="radioText"></font>
109 <hr/>
110 <input type="checkbox" name="checkGroup" value="1"/><span>多选按钮1</span>
111 <input type="checkbox" name="checkGroup" value="2"/><span>多选按钮2</span>
112 <input type="checkbox" name="checkGroup" value="3"/><span>多选按钮3</span>
113 <button onclick="setCheckboxVal();">设置多选按钮的值为2</button>
114 <br>
115 <font color="red" id="checkBoxText"></font><br>
116 <font color="red" id="checkBoxText1"></font>
117 <hr/>
118 <select name="selectGroup">
119 <option value="1">select1</option>
120 <option value="2">select2</option>
121 <option value="3">select3</option>
122 </select>
123 <button onclick="setSelectVal();">设置下拉框的值为2</button>
124 <br>
125 <font color="red" id="selectText"></font>
126 <hr/>
127 <select name="selectGroup1" multiple="multiple">
128 <option value="1">select1</option>
129 <option value="2">select2</option>
130 <option value="3">select3</option>
131 </select>
132 <br>
133 <button onclick="setManySelectVal();">设置多选下拉框的值为1,2</button>
134 <font color="red" id="selectText1"></font>
135 </body>
136 </html>
