<%@ 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. python利用socketserver实现并发套接字功能

    本文实现利用python的socketserver这个强大的模块实现套接字的并发 目录结构如下: 测试文件请放在server_file文件夹里面 server.py #!/usr/bin/env py ...

  2. Laravel5中使用阿里大于(鱼)发送短信验证码

    在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...

  3. 云主机与vps虚拟主机的区别

    云计算时代,云主机其可扩展性.价格便宜.安全可靠的特性深受企业和开发者欢迎,但目前有些IDC企业,新瓶装旧酒,将虚拟主机.VPS进行包装推出所谓的云主机服务,为了帮助用户更好的辨别和挑选云主机,下文详 ...

  4. php 类的相互访问

    ========================================================================================== // public ...

  5. __block __weak

    IOS BLOCK收集 在ios,blocks是对象,它封装了一段代码,这段代码可以在任何时候执行.Blocks可以作为函数参数或者函数的返回值,而其本身又可以带输入参数或返回值.它和传统的函数指针很 ...

  6. sqlite3使用事务处理[zz]

    <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-al ...

  7. properties文件中中文不能显示或者中文乱码

    1.properties 文件中文乱码问题 鼠标“右击”文件 => Resource => Text file encoding => UTF-8 2.properties 文件解析 ...

  8. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  9. es6重点笔记：对象

    1,Object.is():比较两个值是否严格相等,es5的'===',不能判断+0和-0,还有NaN,但是es6的Object.is()可以区分 Object.is(+0, -0); // fals ...

  10. Python的交叉编译移植至arm板

    虽然网上有那么多python的交叉编译移植教程,但是方法差异蛮大,需要根据实际开发板的型号做调整,以下是适用于海思的板子移植过程. step 1. python版本从网上下就可以: step 2. 解 ...