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); });