jquary 单选，多选，select 获取和设置值 jquary自定义函数
<%@ 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自定义函数的更多相关文章
- JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C#提高--------------获取方法返回值的自定义特性（Attribute）
.NET(C#):获取方法返回值的自定义特性(Attribute) 转载 2013年05月08日 10:54:42 1456 来自:http://www.cnblogs.com/mgen/archiv ...
- jquery获取和设置值
1.html html() : 取得第一个匹配元素的html内容. html(value): 设置每一个匹配元素的html内容 2text text() : 取得所有匹配元素的内容,结果是由所有 ...
- 个人永久性免费-Excel催化剂功能第56波-获取Excel对象属性相关自定义函数
之前零散开发过一些自定义函数获取Excel对象属性,此次再细细地把有价值的属性都一一给开发完成,某些场景下,有这些小函数还是可以比较方便地实现一些通过Excel界面没法轻松获取到的信息. 修复与更新 ...
- Django前端获取后端数据之前端自定义函数
在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...
- php如何获取单选复选和选择框的值
1.很久没有写基础的东西了复习一下(往往简单的东西才复杂) <body> 选择语句 <form action="demo.php" method="po ...
- Bootstrap select 多选并获取选中的值
代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> < ...
- 使用layui框架的select获取选中的值
在使用时需要注意:select标签的外层需要加上类名".layui-form" 接下来就是根据需求来改变下拉框的内容了,直接给select的option重新赋一次值,记得加上对应的 ...
- Cookie获取、设置值
设置: HttpCookie cookie = new HttpCookie("cookieName"); cookie.Value = "name1" Htt ...
随机推荐
- v-for并判断当前元素是否选中：$set实现响应添加属性
前言 一直纠结着使用v-for进行列表渲染时如何为当前的元素添加是否选中的标识. 1.v-for进行列表渲染 <div class="lists"> <ul> ...
- 织梦DedeCMS v5.7 实现导航条下拉菜单
首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...
- (实用篇)使用PHP生成PDF文档
http://mp.weixin.qq.com/s?__biz=MzIxMDA0OTcxNA==&mid=2654254929&idx=1&sn=8715d008d19af70 ...
- JavaSE笔记-泛型
定义带泛型的类 public class Cat<T> { //可以用T定义实例变量 private T name; //可以用T定义形参 //构造器没有<> public C ...
- 关于JWPlayer播放器的一些测试学习
<!DOCTYPE html><html><head> <title>jwplayer播放器测试</title> <script ty ...
- 邓_phpcms_phpcms授课思路复习
思路: 一.目前在企业中使用比较多的cms内容管理有如下几种: 1.dedecms 2.phpcms 二.我们选择学习v9版本的phpcms,主要有以下几点原因: 1.基于MVC模式的内容管理系统 2 ...
- openfire服务器+Spark搭建即时聊天系统 & 阿里云的初步探索
晚上出去和洋仔吃了涮肉,喝了点啤酒,不知不觉就聊到了11点,感觉他工作状态还不错,emmm...都要加油吧.虽然没有当时去山西零下二十多度那么夸张,这几天北京的冬夜还是有点小冷的.好了进入正题: 一. ...
- Flexible Box布局基础知识详解
1.基本概念,借用阮一峰老师的一张图: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫 ...
- ABB中断设定
简介: 中断是程序定义事件,通过中断编号识别.中断发生在中断条件为真时.中断不同于其他错误,前者与特定消息号位置无直接关系(不同步).中断会导致正常程序执行过程暂停,跳过控制,进入软中断程序. 即使机 ...
- Linux或Window是修改snmp的默认端口
SNMP默认端口通讯使用 UDP 161,在安装一些监控软件的过程中,常常提示端口被占用等情况,下面说一下如何修改系统的默认SNMP端口 windows修改snmp端口 1 打开services文件 ...