jquery 过滤选择器 和 后代选择器

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%@ include file="/WEB-INF/jsp/common/base.jsp"%>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9.     <jsp:include page="/WEB-INF/jsp/common/baseJS.jsp"></jsp:include>
  10.     <jsp:include page="/WEB-INF/jsp/common/baseCSS.jsp"></jsp:include>
  11. <title>checkbox&nbsp;radio.jsp</title>
  12. </head>
  13. <body>
  14.     <form action="">
  15.         <input type="radio" name="sex" value="male" checked="checked"/> Male
  16.         <input type="radio" name="sex" value="female" /> Female
  17.         <hr/>
  18.         I have a bike:
  19.         <input type="checkbox" name="vehicle" value="Bike" />
  20.         <br />
  21.         I have a car:
  22.         <input type="checkbox" name="vehicle" value="Car" checked="checked" />
  23.         <br />
  24.         I have an airplane:
  25.         <input type="checkbox" name="vehicle" value="Airplane" />
  26.     </form>
  27.     <button class="radio">radio</button>
  28.     <button class="checkbox">checkbox</button>
  29.     <button class="all">__all__</button>
  30.  
  31.     <script type="text/javascript">
  32.         $(function(){
  33.             $(".radio").click(function() {
  34.                 //form:checked一定不要加空格,意为过滤选择器,即选取:checked的input[name='sex']的元素
  35.                 var $checkedObj = $("input[name='sex']:checked");
  36.                 console.log("被选中的radio共有"+ $checkedObj.size() +"个");
  37.                 $.each( $checkedObj , function(index,obj){
  38.                     alert("第"+index+"个被选中的radio的值为 "+$(obj).val());
  39.                 });
  40.             });
  41.  
  42.             $(".checkbox").click(function() {
  43.                 //form:checked一定不要加空格,意为过滤选择器,即选取:checked的input[name='vehicle']的元素
  44.                 var $checkedObj = $("input[name='vehicle']:checked");
  45.                 console.log("被选中的checkbox共有"+ $checkedObj.size() +"个");
  46.                 $.each($checkedObj,function(index,obj){
  47.                     alert("第"+index+"个被选中的checkbox的值为 "+$(obj).val());
  48.                 });
  49.             });
  50.  
  51.             $(".all").click(function() {
  52.                 //form :checked一定要加空格,意为后代选择器,即form的内容中带有:checked的元素
  53.                 var $checkedObj = $("form :checked");
  54.                 console.log("被选中的元素共有"+ $checkedObj.size() +"个");
  55.                 $.each($checkedObj,function(index,obj){
  56.                     alert("第"+index+"个被选中的元素的值为 "+$(obj).val());
  57.                 });
  58.             });
  59.         })
  60.     </script>
  61. </body>
  62. </html>

补充说明 $.each(list,function(index,obj)){...}用法

http://www.cnblogs.com/cdemo/p/4142695.html

$.each可以遍历element dom元素正如上例中用法,也可以遍历jsonArray如下.

  1. //如果myJsonArray = [{ id: 1, department: '开发部' }, { id: 2, department: '销售部' }, {id:3,department:'行政部'}];
  2.  $.each(myJsonArray,function(index,obj){
  3.     alert("第"+index+"个被选中的元素的值为 "+obj.department);
  4. });

jquery :checked(过滤选择器) 和 空格:checked(后代选择器)的更多相关文章

  1. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)【转】

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

  2. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  3. JS封装简单后代选择器

    大概思路是这样的:通过判断传过来的参数是什么类型,如果是对象,那这里就是this(因为封装是自己用的,肯定不会随便乱传一个对象过来),如果是一个函数(匿名函数),那就是Dom加载(这里先不讲),如果是 ...

  4. css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

    高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签 字体颜色都被设置 ...

  5. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  6. web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

  7. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  9. JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

随机推荐

  1. uva 11582

    #include <iostream> #include <map> #include <cmath> #include <vector> #inclu ...

  2. IOC及Bean容器

    1. 接口及面向接口编程 1.1. 接口 用于沟通的中介物的抽象化 实体把自己提供给外界的一种抽象化说明,用以由内部操作分离出外部沟通方法,使其能被修改内部而不影响外界其他实体与其交互的方式 对应JA ...

  3. Deleting backup_label on restore will corrupt your database!

    The quick summary of this issue is that the backup_label file is an integral part of your database c ...

  4. 用JS编写日历的简单思路

    提要:本文以写当前时间环境下当月的日历表为例,用最简单的方法实现JavaScript日历,旨在展示JS世界中实用为本.简单为上的解决问题的思路. Web页中的日历一般离不开表格,通常都使用表格装载指定 ...

  5. MySQL下载及安装

    MySQL官网  http://dev.mysql.com/downloads/ Download --> Community --> MySQL Community Server 选择操 ...

  6. MySQL日志恢复误删记录

    1.查询日志是否开启 show variables like"log_"; 2.查询是用的哪个日志文件 show master status; 3.定位是在什么时间误删的 /usr ...

  7. boost-asio-cpp-network-programming阅读笔记

    第二章:boost.asio 的基本原理 网络api boost.asio的命名空间 IP地址 端点 sockets 同步错误代码 socket成员函数 其他注意事项 read/write/conne ...

  8. 如何测试手机上的SOAP客户端

    周四晚上,服务端和客户端的两个同事因为soap接口的问题争论了起来.服务端的同事认为客户端的同事发给服务端的soap消息的xml结构有问题,少了几个xml节点,导致服务器端解析出错.而客户端的同事认为 ...

  9. SQL 养成一个好习惯是一笔财富

    来源:MR_ke 链接:http://www.cnblogs.com/MR_ke/archive/2011/05/29/2062085.html 我们做软件开发的,大部分人都离不开跟数据库打交道,特别 ...

  10. Codeforces Round #378 (Div. 2) D - Kostya the Sculptor

    Kostya the Sculptor 这次cf打的又是心累啊,果然我太菜,真的该认真学习,不要随便的浪费时间啦 [题目链接]Kostya the Sculptor &题意: 给你n个长方体, ...