jquary 单选，多选，select 获取和设置值 jquary自定义函数 

  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>

 

posted @ 2016-08-28 18:16  user_孙  阅读(350)  评论(0)    收藏  举报