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>