jquery :checked(过滤选择器) 和 空格:checked(后代选择器)【转】
2024-10-12 06:08:24
jquery 过滤选择器 和 后代选择器
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/base.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/WEB-INF/jsp/common/baseJS.jsp"></jsp:include>
<jsp:include page="/WEB-INF/jsp/common/baseCSS.jsp"></jsp:include>
<title>checkbox radio.jsp</title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="male" checked="checked"/> Male
<input type="radio" name="sex" value="female" /> Female
<hr/>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" checked="checked" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
<button class="radio">radio</button>
<button class="checkbox">checkbox</button>
<button class="all">__all__</button> <script type="text/javascript">
$(function(){
$(".radio").click(function() {
//form:checked一定不要加空格,意为过滤选择器,即选取:checked的input[name='sex']的元素
var $checkedObj = $("input[name='sex']:checked");
console.log("被选中的radio共有"+ $checkedObj.size() +"个");
$.each( $checkedObj , function(index,obj){
alert("第"+index+"个被选中的radio的值为 "+$(obj).val());
});
}); $(".checkbox").click(function() {
//form:checked一定不要加空格,意为过滤选择器,即选取:checked的input[name='vehicle']的元素
var $checkedObj = $("input[name='vehicle']:checked");
console.log("被选中的checkbox共有"+ $checkedObj.size() +"个");
$.each($checkedObj,function(index,obj){
alert("第"+index+"个被选中的checkbox的值为 "+$(obj).val());
});
}); $(".all").click(function() {
//form :checked一定要加空格,意为后代选择器,即form的内容中带有:checked的元素
var $checkedObj = $("form :checked");
console.log("被选中的元素共有"+ $checkedObj.size() +"个");
$.each($checkedObj,function(index,obj){
alert("第"+index+"个被选中的元素的值为 "+$(obj).val());
});
});
})
</script>
</body>
</html>
补充说明 $.each(list,function(index,obj)){...}用法
http://www.cnblogs.com/cdemo/p/4142695.html
$.each可以遍历element dom元素正如上例中用法,也可以遍历jsonArray如下.
//如果myJsonArray = [{ id: 1, department: '开发部' }, { id: 2, department: '销售部' }, {id:3,department:'行政部'}];
$.each(myJsonArray,function(index,obj){
alert("第"+index+"个被选中的元素的值为 "+obj.department);
});
最新文章
- 送给我的朋友——Cry on my shoulder
- Android每次运行项目时重新启动一个新的模拟器的解决办法
- tableView异步下载图片/SDWebImage图片缓存原理
- linux内核中的min(x, y)和max(x, y)宏定义
- ECMAScript5下Array的方法
- 关于近期需要学习sqlserver2008
- 迷你 MVC
- 【Unity与23种设计模式】抽象工厂模式（Abstract Factory）
- 微信小程序适配iphonex
- orchestrator HTTP接口forget-cluster误下线集群问题
- 用R语言分析与预測员工离职
- 受限玻尔兹曼机(Restricted Boltzmann Machine, RBM) 简介
- sql 查询年龄
- Arduino Leonardo读取DHT22温湿度传感器
- win10下安装Oracle 11g 32位客户端遇到INS-13001环境不满足最低要求
- php 数字格式化
- U盘插入拔出提示
- 自定义spring valid方式实现验证
- vs2010一运行就报错deven.exe assert failure 解决方法，卸载系统中.netFramework最新版本的（简体中文）
- .Net中的并行编程-1.路线图（转）