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 ...
随机推荐
- nodejs学习笔记 —— 异步编程解决方案
在js或者node编程中,由于异步的频繁和广度使用,使得回调和嵌套的深度导致编程的体验遇到一些挑战,如果写出优雅和好看的代码,本文主要针对异步编程的主流方案做一些总结 1.事件发布/订阅模式 事件监听 ...
- 微软Azure AspNetCore微服务实战第2期
2018年1月28日,虽然上海的大雪在城区已经见不到踪影,但还是很冷.不过天气再冷,也阻止不了小伙伴参加活动的热情. 感谢王振,苏老师以及微软Azure API Management的产品经理Alvi ...
- CCF系列之矩阵(201512-5)
试题名称: 矩阵 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 创造一个世界只需要定义一个初状态和状态转移规则. 宏观世界的物体运动规律始终跟物体当前的状态有关,也就是说只要 ...
- 关于多台机器之前session共享，sessionState mode="StateServer" 问题的困扰
.net 多台机器共享session是很老的技术,一直很少用到session. 最近就出现了一个问题:三台前端,其中一台保存的session值死活不对,一样的环境,一样的配置文件,就是和另外两台获得的 ...
- MySQL的char和varchar针对空格的处理
MySQL的char和varchar存储和查询中包含空格的实验 MySQL版本 一.测试char包含空格的存储和查询 测试发现,存储的数据,char数据类型的右侧空格存储的时候被删除了,但是左侧空格还 ...
- 基于 HTML5 的 3D 工控隧道案例
隧道的项目我目前是第一次接触,感觉做起来的效果还蛮赞的,所以给大家分享一下.这个隧道项目的主要内容包括:照明.风机.车道指示灯.交通信号灯.情报板.消防.火灾报警.车行横洞.风向仪.COVI.微波车检 ...
- scrapy_随机ip代理池
什么是ip代理? 我们电脑访问网站,其实是访问远程的服务器,通过ip地址识别是那个机器访问了服务器,服务器就知道数据该返回给哪台机器,我们生活中所用的网络是局域网,ip是运营商随机分配的,是一种直接访 ...
- 重温吕鑫MFC教学视频(一)
重温吕鑫MFC教学视频(一)1. picture控件的使用,可以显示icon和bitmap2. WM_Create窗口的创建3. 创建的销毁消息及区别WM_SYSCOMMAND WM_CLOSE WM ...
- char (*p)[]和char *p[]的区别
理解的关键在于: 1. []的优先级高于*,(*p)[]理解为指向一个数组,*(p[])存放指针的数组 2. char (*p)[SIZE]:指向一维数组的指针,一维数组只能有SIZE个元素 char ...
- java —— equals 与 ==
equals 众所周知,java 中的所有的类都继承自 Object 这个超类 ,他就是Java所有类的父类或祖先类,Object类里面有一个equals方法,并且提供了默认的实现,如下所示. pub ...