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 ...
随机推荐
- Android回顾系列——之HttpUrlConnect的使用
写在前面: 最近准备一个关于Android的比赛.由于赛项要求,不得使用第三方工具.框架:故最近来温习一下Google官方提供的原始API的使用. 说实话,用惯了第三方的库,再回过头来用原生的api的 ...
- Android ListView 设置单选
为 ListView 设置选中状态,需要经过如下几个步骤: 设置 ListView 的 android:choiceMode="singleChoice" 设置 ListView ...
- Bundle使用&NSBundle
之 前在初始化一个类的时候:TestViewController *viewcontroller=[[TestViewController alloc]initWithNibName:@"T ...
- Jquery实现两级联动
最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...
- "Cache-control”常见的取值private、no-cache、max-age、must-revalidate及其用意
http://www.cnblogs.com/kaima/archive/2009/10/13/1582337.html 网页的缓存是由HTTP消息头中的"Cache-control&quo ...
- Python中几种数据类型list, tuple,dict,set的使用演示
还是直接上代码,看着代码运行,看函数介绍 # coding=utf-8 # 1 list-列表 的用法 students = [1,2,3] a = 5 classmates = [students* ...
- Linxu指令--crond
前一天学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...
- 流API--初体验
在JDK8新增的许多功能中,有2个功能最重要,一个是Lambda表达式,一个是流API.Lambda表达式前面我已经整理过了,现在开始整理流API.首先应该如何定义流API中的"流" ...
- 开发步骤Dubbo、spring mvc、springboot、SSM开发步骤
一.Dubbo开发步骤: 链接:https://pan.baidu.com/s/1pMPO1kf 密码:9zaa 第一: 1.创建consumer工程2.在pom.xml文件下添加配置3.添加appl ...
- struts2 action 页面与action参数的传递的三种方式
第一种: 初始页面: <form action="LoginAction.action" method="post"> 用户名:<input ...