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&nbsp;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);

});

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. phpwind之关闭账号通

    phpwind的账号通功能早就失效了,但是首页的链接一直存在,造成了很不好的影响 但是后台打开账号通功能又打不开,所以想到了在前端的模板中通过屏蔽这部分代码的方法隐藏掉这个功能在首页的显示 1.打开/ ...

  2. FlashFXP 破解代码

    FlashFXP RealKEY: ------------- 将以下内容COPY到软件里面的注册框即可 ------------- FLASHFXPwQAOlhkgwQAAAAC6W5MNJwTns ...

  3. codeForce-589D Boulevard（判断线段是否相交）

    题目大意:n个人.一个区间.每个人都会在某个时间段内按相同的速度(所有人的速度都一样,都是1或-1)在他的区间内从一个端点走到另一个端点(只走一次).问每个人会与几个人碰面. 题目分析:将时间看成一个 ...

  4. Bank，我只是来完成作业的

    写这个Bank我需要有:开户,取款,存款,转账,查询余额,退出功能. 这样我需要有两个类:Bank,User.一个Main入口. 先看这个User,他定义了各个需要的属性(字段)和字段的属性(虽然在这 ...

  5. Scrum2.0 项目基本完成

  6. ecshop教程：重置后台密码MD5+salt

    ecshop密码加密方式: MD5 32位+salt,简单来说就是明文密码用MD5加密一次,然后在得到的MD5字符后边加上salt字段值(salt值为系统随机生成,生成以后不再改变)再进行一次MD5加 ...

  7. Razor基础语法简介

    http://blog.csdn.net/pasic/article/details/7072340 Razor的出现,使页面看起更加简洁,Razor的页面后缀为:.cshtml Razor基础语法: ...

  8. 报错：HTTP Status 404 - There is no Action mapped for namespace [/] and action name [product-save] associated with context path [/20161101-struts2-2].

    运行:index.jsp---->input.jsp----->details.jsp,但是在input.jsp到details.jsp的时候报错误. 异常如下: 严重: Could no ...

  9. windows server 2008服务器 做raid0

    dell服务器,启动后,根据提示按F10进入raid设置,设置成raid0 我们的服务器是4块硬盘,每块600G,做raid0时,生成一个虚拟磁盘vdisk. 做完raid之后,做OS部署 重启服务器 ...

  10. FCKeditor 2.6.4.1 初始化值不能显示中文问题

    最近在学习PHP加入FCKeditor 在线编辑器,发现在初始化Value赋值时,英文可以显示出来,中文怎么都显示不出来,连乱码都不显示. 经过漫长的探索,终于找到原因了! 在fckeditor目录下 ...