<%@ 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. 任务驱动 搭建SSM开发环境

    本篇主要阐述(IntelliJ IDEA + Maven + Spring + Spring MVC + Mybatis)搭建 为什么想要搭建ssm? 近期正好自己有一个小的点子要实现,恰好这学期开了 ...

  2. 火狐浏览器怎么查看页面加载了那些js文件，那系js文件有作用

    方法一: 右击查看原代码,点击js链接如果能够看到文件内容,证明加载成功 方法二: 按F12键,如果控制台没有加载错误,证明加载成功:

  3. 一个简洁的PHP可逆加密函数(分享)

    http://www.jb51.net/article/38018.htm 本篇文章是对一个简洁的PHP可逆加密函数进行了详细的分析介绍,需要的朋友参考下   很多时候我们需要对数据进行加密解密,比如 ...

  4. Java读书推荐

    想要深入掌握一门技术,读书是必不可少的一步,也是最重要的一步.有些书需要读很多遍才能深入理解,经过几本甚至几十本书的熏陶,才能让你在这个行业中越走越远,爱上这个行业,抽出时间多读本书吧,读书会让人如虎 ...

  5. 手机WebApp是什么？

    手机WebApp是基于HTML5+css3开发的,一次开发,可以兼容许多的平台(android/iphone),调用本地功能(比如照相),可以用phonegap去实现,所以,是一个趋势.相比每个平台定 ...

  6. linux_硬件信息

    运维关注哪些方面? CPU:对计算机工作速度和效率起决定性作用(intel amd) 内存: 临时存放数据:容量和处理速度,决定数据传输快慢 硬盘(disk):数据持久化,决定电脑反应速度:优化硬盘是 ...

  7. 链表法解决hash冲突

    /* @链表法解决hash冲突 * 大单元数组,小单元链表 */ #pragma once #include <string> using namespace std; template& ...

  8. String 类的选择输出

    package com.day_08.strings; /* * 通过API可知/String是在Java.lang包下的类,所以不用导包 */ public class StringDemo { p ...

  9. MoonLight可视化订单需求区域分析系统前端

    MoonLight可视化订单需求区域分析系统实现功能: 在现实生活中,计算机和互联网迅速发展,人们越来越趋向于网络,于是我们就有了各种各样的系统,来帮助我们更好地生活.比如对于打车来说,我们也可以通过 ...

  10. awk的批量replace功能

    awk的批量replace功能 需求 现在需要替换一个文本 文本内容如下 $cat file MD_D1TS_1_060_I MD_D1TS_1_061_F MD_D1TS_1_062_U MD_D1 ...