1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值</title>
  6. <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.       /*------------
  10.         全选/全不选
  11.         ------------*/
  12.      $('#cboxchecked').click(function(){
  13.          //判断apple是否被选中
  14.          var bischecked=$('#cboxchecked').is(':checked');
  15.          var fruit=$('input[name="fruit"]');
  16.          bischecked?fruit.attr('checked',true):fruit.attr('checked',false);
  17.          });
  18.          /*-------------
  19.             获取选中值
  20.           -------------*/
  21.         $('#btn_submit').submit(function(){
  22.             $('input[name="fruit"]:checked').each(function(){
  23.                 var sfruit=$(this).val();
  24.                 alert(sfruit);
  25.                 });
  26.                 return false;
  27.             });
  28.     })
  29. </script>
  30. </head>
  31.  
  32. <body>
  33. <form action="">
  34.   <input type="checkbox"  id="cboxchecked" />
  35.   <label for="cboxchecked">全选/全不选</label>
  36.   <br />
  37.   <br />
  38.   <input type="checkbox"  id="cboxapple" name="fruit" value="apple" />
  39.   <label for="apple">Apple</label>
  40.   <input type="checkbox"  id="cboxorange" name="fruit" value="orange" />
  41.   <label for="orange">Orange</label>
  42.   <input type="checkbox"  id="cboxbanana" name="fruit" value="banana" />
  43.   <label for="banana">Banana</label>
  44.   <input type="checkbox"  id="cboxgrapes" name="fruit" value="grapes" />
  45.   <label for="grapes">Grapes</label>
  46.   <br />
  47.   <br />
  48.   <input type="submit" id="btn_submit" value="submit" />
  49. </form>
  50. </body>
  51. </html>

JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值的更多相关文章

  1. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  2. checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. jquery实现checkbox的单选和全选

    一.思路 全选:判断“全选”checkbox的状态,如果选中则把tbody下所有的checkbox选中,反之 单选:主要是判断有没有全选,如果不是选中状态就把全选的checkbox状态设置为false ...

  4. checkbox的全选，取消全选，获得选中值

    <html> <head> <title>jq全选以及获得选中项的值</title> <meta charset="utf-8" ...

  5. Android开发CheckBox控件，全选，反选，取消全选

    在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...

  6. 扩展支持全选的CheckBox列。

    扩展支持全选的CheckBox列. https://www.codeproject.com/articles/42437/toggling-the-states-of-all-checkboxes-i ...

  7. Web网页树形列表中实现选中父节点则子节点全选和不选中父则子全不选

                需要实现的功能:选中父节点对应子节点全选:不选中父节点,对应子节点也不选中 如下图所示,选中车队,对应车队中车辆也全部选中,以实现车队中所有车辆在地图上的显示. 选中cqupt ...

  8. jQuery入门简单实现反选与全选

    //html代码<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路 <input t ...

  9. 2016/3/31 ①全选时 下面选项全选中 ② 下面不选中时 全选取消 ③在“” 中 转义字符的使用\ onclick=\"Checkpa(this,'flall')\"; ④区别于分别实现 重点在于两种情况合并实现

    testxuanbuxuan.php <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  10. 微信小程序获取复选框全选，反选选中的值

    wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap=&quo ...

随机推荐

  1. 【codeforces 758A】Holiday Of Equality

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  2. Ehcache配置

    http://blog.csdn.net/lwx2615/article/details/5624388 http://www.cnblogs.com/hoojo/archive/2012/07/12 ...

  3. Linux网络编程——原始套接字能干什么？

    通常情况下程序员接所接触到的套接字(Socket)为两类: (1)流式套接字(SOCK_STREAM):一种面向连接的 Socket,针对于面向连接的TCP 服务应用: (2)数据报式套接字(SOCK ...

  4. js获取计算后的样式表

    在编写html时,使用dom对象的style属性可以获取标签里的style属性,但是不能获取单独css样式文件或者style标签的属性值 <div style="width:10px& ...

  5. System and method for dynamically adjusting to CPU performance changes

    FIELD OF THE INVENTION The present invention is related to computing systems, and more particularly ...

  6. 小强的HTML5移动开发之路（22）—— Adobe DreamWeaver CS6安装与破解

    首先说明一下,这里介绍Adobe DreamWeaver CS6的安装与破解是为了后面的jQuery Mobile框架使用做好准备. 一.首先去Adobe官网下载:http://www.adobe.c ...

  7. A GUIDE TO UNDERSTANDINGDISCRETIONARY ACCESS CONTROL INTRUSTED SYSTEMS

    1. INTRODUCTION   The main goal of the National Computer Security Center is to encourage the widespr ...

  8. ES6与React中this完全解惑

    计划写很长的篇幅,预计12月初完成. 这篇文章涉及的知识较多,可能一次消化不了,可以渐渐来. 先说结论: 无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下 ...

  9. burp suite中国乱码的解决方案

    于http的response还有经常出现乱码,其实解决的办法很easy 首先点击Options标签, 然后找到display 找到http message display watermark/2/te ...

  10. sql操作xml小总结

    一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和参数.为了更好地支持 XM ...