<%@ 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. (实用篇)使用PHP生成PDF文档

    http://mp.weixin.qq.com/s?__biz=MzIxMDA0OTcxNA==&mid=2654254929&idx=1&sn=8715d008d19af70 ...

  2. UILabel的顶对齐解决方法

    对于有多行文字的UILabel而言,需要设置UILabel的numberoflines属性,此属性默认是1,也就是只显示一行,多余的会以尾部,中间的方式进行截断,具体要看你的初始设置. 在这里可以将其 ...

  3. HTML 5 <embed> 标签

    定义和用法 <embed> 标签定义嵌入的内容,比如插件. 实例 <embed src="helloworld.swf" />

  4. 【开发技术】视频URL采集

    http://www.joyplus.tv/joypluscms   志精

  5. P2P视频模块

    P2P视频模块数据手册 公  司 : 深圳市万秀电子有限公司 网  站 : http://www.wanxiucx.com 总  机 : 0755-23215689 联系人: 张先生 手  机 : 1 ...

  6. Spring简单的REST例子

    控制器处理 HTTP 的4个主要方法 GET,POST,PUT,DELETE 使用@PathVariable注解获取URL中的参数 import javax.inject.Inject; import ...

  7. 基于百度地图SDK和Elasticsearch GEO查询的地理围栏分析系统（3）-前端实现

    转载自:http://www.cnblogs.com/Auyuer/p/8086975.html MoonLight可视化订单需求区域分析系统实现功能: 在现实生活中,计算机和互联网迅速发展,人们越来 ...

  8. 用 chrome 调试 node.js 代码

    1.全局安装 node-inspector  cnpm install -g node-inspector 2.启动node项目入口文件,如 node --inspect index.js 3.控制台 ...

  9. ROS学习笔记

    创建ros工作环境: mkdir -p ~/catkin_ws/src //建立项目目录,同时生成src文件夹 cd ~/catkin_ws/ //进入项目目录 catkin_make //编译项目, ...

  10. 将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）

    版权声明:本文为博主原创文章,未经博主允许不得转载 本文主要讲前端内容,后端涉及较少,可以认为是使用Java. 首先是excel文件上传,这个较为简单,可以html5的数据接口FormData()进行 ...