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 ...
随机推荐
- Mac下用SSH连接远程Linux或Mac服务器
1.打开Mac终端 2.切换到root登录 输入命令:sudo -i,然后输入本机密码 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px &qu ...
- 移动端 -webkit-user-select:text; ios10 bug 解决方案
移动端一般body的css.会设置 作用就不解释了: body{ height:100%;min-height:100%; font-family: "微软雅黑",'Helveti ...
- 前后端分离之CORS和WebApi
目前的项目是前端mv*+api的方式进行开发的,以前都是没有跨域的方案,前后端人员在同一个解决方案里边进行开发,前端人员要用IIS或VS来开发和调试Api,这样就很不方便,迫切需要跨域访问Api. 评 ...
- String 类的选择输出
package com.day_08.strings; /* * 通过API可知/String是在Java.lang包下的类,所以不用导包 */ public class StringDemo { p ...
- 虚拟机centos7无法上网解决方法
1.打开终端输入cd /etc/sysconfig/network-scripts/,输入ls查看网卡配置文件名,每台机器的网卡名并不相同. 第一个ifcfg-ens33是我的网卡名 2. 先取得ro ...
- java数组基础
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- 溢出问题:overflow后最后一排文字显示不全
溢出字体会显示在padding区域(http://www.divcss5.com/css-hack/c680.shtml) section#xinwen li a h3{ border-bottom: ...
- JavaScript this浅析
在做聊天室的过程中,我遇到了一个小问题,在javascrip中,有没有和c语言中的静态变量类似的对象呢? 答案就在闭包之中. 而说到闭包,又得说说那个我视之如地雷的this.this搞明白了,闭包这东 ...
- ehcache模糊批量移除缓存
目录 前言 实现 总结 前言 众所周知,encache是现在最流行的java开源缓存框架,配置简单,结构清晰,功能强大.通过注解@Cacheable可以快速添加方法结果到缓存.通过@CacheEvic ...
- js 判断一个文本框是否获得焦点
1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素 // 查找你要判断的文本框 ...