<%@ 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. TP传输的两种模式

      主动模式(active):   我们知道,FTP是由TCP封包的模式连接,TCP 这种封包由于需要经过 Server 端与 Client 端两边的『三次握手』之后,才能确定联机,也就是需要执行AC ...

  2. 急！！ftp登录错误，提示 530 not logged in，连接失败 ，，是怎么回事啊

    愤怒地青鸟 | 浏览 68533 次 发布于2017-04-11 00:44 最佳答案 核心提示:Ftp登陆不了是很经常碰到的事,很多人常常是不加分析就发贴询问.老实说,这样既浪费自己时间,又浪费别人 ...

  3. 在js中怎样获得checkbox里选中的多个值？

    https://zhidao.baidu.com/question/203897221.html 思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中, ...

  4. Dreamweaver cs6中文版完整安装步骤：

    Dreamweaver cs6中文版完整安装步骤: http://www.cr173.com/soft/72633.html 1.首先我们需要下载Dreamweaver cs6官方中文原版安装程序,下 ...

  5. tone() 和 IRremote 冲突的解决办法

    tone()函数冲突 http://www.geek-workshop.com/thread-4037-1-1.html 可以自制函数newtone() void newtone(byte toneP ...

  6. Python使用requests模块访问HTTPS网站报错`certificate verify failed`

    使用requests模块访问HTTPS网站报错: SNIMissingWarning: An HTTPS request has been made, but the SNI (Subject Nam ...

  7. linux_nginx反向代理

    什么代理? 代理他人工作 什么是正向代理和反向向代理,他们之间的区别? 这两个代理很类似,但扮演了两个不同角色,一个站在用户角度,一个站在服务端角度 正向代理: 帮助用户请求服务 返向代理:帮助服务均 ...

  8. linux_文件权限

    权限贯穿linux整个系统 创建文件或目录,属主和组都是当前用户 linux权限位? 9位基础权限位, 3位一组,总共12位权限 用户对文件权限,相当于你的笔记本 r      读    4 w    ...

  9. JAVA中获取文件MD5值的四种方法

    JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...

  10. Android ui 透明度设置

    格式如#00FFFFFF,前两位代表不透明度的十六进制.00表示完全透明,FF就是全不透明.依次递增. <?xml version="1.0" encoding=" ...