<%@ page contentType="text/html; charset=UTF-8"%>

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <script type="text/javascript" src="<c:url value='/system/script/jquery-1.11.1.js'/>"></script>

 <%-- <link rel="stylesheet" type="text/css" href="<c:url value='/system/css/bootstrap.css'/>"/> --%>

 <style type="text/css" ></style>

 <script>

 $(document).ready(function() {

     //获得单选按钮的value,text

     $("[name='radioGroup']").on("change",function() {

         var radioValue = $(this).val();

         var radioText = $(this).parent().text();

         $("#radioText").text("单选按钮的value："+radioValue + ",text:" + radioText);

     });

     //获得多选按钮的value,text

     $("[name='checkGroup']").on("change",function() {

         var array = new Array();

         var arrayName = [];

         $("[name='checkGroup']:checked").each(function(){

             var cbVal = $(this).val();

             var cbText = $(this).next().text();

             array.push(cbVal);

             arrayName.push(cbText);

         });

         $("#checkBoxText").text("多选按钮的val：" + array.join(",") + ",text:" + arrayName);

         if ($("[name='checkGroup'][value='1']").is(':checked')) {

             $("#checkBoxText1").text("多选按钮1被选中");

         } else {

             $("#checkBoxText1").text("");

         }

     });

     //获得select的值

     $("[name='selectGroup']").on("change",function() {

         $("#selectText").text($(this).val() + ":" + $(this).find("option:selected").text());

     });

     $("[name='selectGroup1']").on("change",function() {

         $("#selectText1").text($(this).val() + ":" + $(this).find("option:selected").text());

     });

     $("[name='selectGroup']").select(function() {

         alert("qqq");

     });

      $("[name='selectGroup']").on("aaa", function() {

          alert("aaa");

      });

     $("[name='selectGroup']").on("bbb", function (event, param) {

          console.log(event);

         alert(param.name);

      });

 });

 //设置单选按钮的值

 function setRadioVal(){

     $("[name='radioGroup']").each(function() {

         if($(this).val() == "2") {

             $(this).prop("checked", true);

         }

     });

 }

 //设置多选按钮的值

 function setCheckboxVal(){

     $("[name='checkGroup']").each(function() {

         $(this).prop("checked", false);

         if($(this).val() == "2") {

             $(this).prop("checked", true);

         }

     });

 }

 //设置下拉框的值

 function setSelectVal(){

     //$("[name='selectGroup']").val("2"); 设置下拉框的值

     //这里可以看到，如果直接使用jquary去给select赋值，并不会触发他的change事件，这不是我想要的，所以就有了trigger方法；

     //$("[name='selectGroup']").val("2").trigger("change");这样我们就可以触发change事件了

 //  $("[name='selectGroup']").val("2").trigger("select");

 //      $("[name='selectGroup']").val("2").trigger("aaa");

     // jquary 自定义函数

      var param = {};

      param.name = "张三"

      $("[name='selectGroup']").val("2").trigger("bbb", param);

 }

 //设置多选下拉框的值

 function setManySelectVal() {

     $("[name='selectGroup1'] option").each(function() {

         if($(this).val() == "1" || $(this).val() == "2") {

             $(this).attr("selected", true);

         }

     });

 }

 </script>

 //设置单选按钮的值 change()不会有反应？

 </head>

 <body>

     <label><input type="radio" name="radioGroup" value="1" />单选按钮1</label>

     <label><input type="radio" name="radioGroup" value="2" />单选按钮2</label>

     <button onclick="setRadioVal();">设置单选按钮的值为2</button>

     <br>

     <font color="red" id="radioText"></font>

     <hr/>

     <input type="checkbox" name="checkGroup" value="1"/><span>多选按钮1</span>

     <input type="checkbox" name="checkGroup" value="2"/><span>多选按钮2</span>

     <input type="checkbox" name="checkGroup" value="3"/><span>多选按钮3</span>

     <button onclick="setCheckboxVal();">设置多选按钮的值为2</button>

     <br>

     <font color="red" id="checkBoxText"></font><br>

     <font color="red" id="checkBoxText1"></font>

     <hr/>

     <select name="selectGroup">

         <option value="1">select1</option>

         <option value="2">select2</option>

         <option value="3">select3</option>

     </select>

     <button onclick="setSelectVal();">设置下拉框的值为2</button>

     <br>

     <font color="red" id="selectText"></font>

     <hr/>

     <select name="selectGroup1" multiple="multiple">

         <option value="1">select1</option>

         <option value="2">select2</option>

         <option value="3">select3</option>

     </select>

     <br>

     <button onclick="setManySelectVal();">设置多选下拉框的值为1,2</button>

     <font color="red" id="selectText1"></font>

 </body>

 </html>

jquary 单选，多选，select 获取和设置值 jquary自定义函数的更多相关文章

  1. JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. C#提高--------------获取方法返回值的自定义特性（Attribute）

    .NET(C#):获取方法返回值的自定义特性(Attribute) 转载 2013年05月08日 10:54:42 1456 来自:http://www.cnblogs.com/mgen/archiv ...

  3. jquery获取和设置值

    1.html html() :   取得第一个匹配元素的html内容. html(value): 设置每一个匹配元素的html内容 2text text() :  取得所有匹配元素的内容,结果是由所有 ...

  4. 个人永久性免费-Excel催化剂功能第56波-获取Excel对象属性相关自定义函数

    之前零散开发过一些自定义函数获取Excel对象属性,此次再细细地把有价值的属性都一一给开发完成,某些场景下,有这些小函数还是可以比较方便地实现一些通过Excel界面没法轻松获取到的信息. 修复与更新 ...

  5. Django前端获取后端数据之前端自定义函数

    在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...

  6. php如何获取单选复选和选择框的值

    1.很久没有写基础的东西了复习一下(往往简单的东西才复杂) <body> 选择语句 <form action="demo.php" method="po ...

  7. Bootstrap select 多选并获取选中的值

    代码: <!DOCTYPE html><html> <head>    <meta charset="UTF-8">    < ...

  8. 使用layui框架的select获取选中的值

    在使用时需要注意:select标签的外层需要加上类名".layui-form" 接下来就是根据需求来改变下拉框的内容了,直接给select的option重新赋一次值,记得加上对应的 ...

  9. Cookie获取、设置值

    设置: HttpCookie cookie = new HttpCookie("cookieName"); cookie.Value = "name1" Htt ...

随机推荐

  1. Unity LayerMask

    Unity用int32的每一位表示32个层,int32用二进制有32位,Layers通常被摄像机用来渲染部分场景,和灯光照射部分场景使用.但是它们也可以用来做射线检测时忽略一些collder或Coll ...

  2. 算法--链表的K逆序问题

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/9e6f4dda3138cf9fab17f996ec85b624.html 链表的K逆序问题     链表的k逆 ...

  3. 将本地的项目导入到github仓库总结lxw

    关键步骤: 第一:git clone https://github.com/lxw18231857001/demo-.git           #把github上面的仓库克隆到本地 本地项目文件夹下 ...

  4. Vuejs实例-00Vuejs2.0全家桶结合ELementUI制作后台管理系统

    Vuejs2.0全家桶结合ELementUI制作后台管理系统 0: 系统环境的介绍 1: Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目 2: Vuejs实例-02Vue.js项目集 ...

  5. 邓_php面试【002】——完整版

    1.用PHP打印出前一天的时间格式是2006-5-10 22:21:21(2分) $a = date("Y-m-d H:i:s", strtotime("-1 day&q ...

  6. 使用Flink的SavePoint功能

    Flink通过SavePoint功能可以做到程序升级后,继续从升级前的那个点开始执行计算,保证数据不中断. Flink中CheckPoint用于保存状态,是自动执行的,SavePoint是指向Chec ...

  7. addTarget:self 的意思是说，这个方法在本类中

    addTarget:self 的意思是说,这个方法在本类中也可以传入其他类的指针*/

  8. Django权限机制的实现

    Django权限机制的实现 1. Django权限机制概述 权限机制能够约束用户行为,控制页面的显示内容,也能使API更加安全和灵活:用好权限机制,能让系统更加强大和健壮.因此,基于Django的开发 ...

  9. 程序员之殇 —— One program, One king (血月)

    Are we living in the time of the end? (程序员的时代是否已经终结了?) 最近,我时常问自己这个问题. 刚读完了一个美国博士的论文,UDT (UDP-based D ...

  10. python_print和input

    什么是输入? --用户从键盘.鼠标或其他终端 输入 的数据 -- input("提示信息") --python 2.7 rqw_input("提示信息") 如何 ...