<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值</title>

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>

<script type="text/javascript">

$(function(){

      /*------------

        全选/全不选

        ------------*/

     $('#cboxchecked').click(function(){

         //判断apple是否被选中

         var bischecked=$('#cboxchecked').is(':checked');

         var fruit=$('input[name="fruit"]');

         bischecked?fruit.attr('checked',true):fruit.attr('checked',false);

         });

         /*-------------

            获取选中值

          -------------*/

        $('#btn_submit').submit(function(){

            $('input[name="fruit"]:checked').each(function(){

                var sfruit=$(this).val();

                alert(sfruit);

                });

                return false;

            });

    })

</script>

</head>

<body>

<form action="">

  <input type="checkbox"  id="cboxchecked" />

  <label for="cboxchecked">全选/全不选</label>

  <br />

  <br />

  <input type="checkbox"  id="cboxapple" name="fruit" value="apple" />

  <label for="apple">Apple</label>

  <input type="checkbox"  id="cboxorange" name="fruit" value="orange" />

  <label for="orange">Orange</label>

  <input type="checkbox"  id="cboxbanana" name="fruit" value="banana" />

  <label for="banana">Banana</label>

  <input type="checkbox"  id="cboxgrapes" name="fruit" value="grapes" />

  <label for="grapes">Grapes</label>

  <br />

  <br />

  <input type="submit" id="btn_submit" value="submit" />

</form>

</body>

</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. J2EE学习篇之--JQuery技术具体解释

    前面我们解说了的J2EE的技术都是服务端的技术,以下我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简单介绍: jQuery由美国人John Resig创建,至今已吸引了来自世界各 ...

  2. 【STL】各容器成员对比表

    http://www.cnblogs.com/fangyukuan/archive/2010/09/21/1832675.html Sequence containers Associative co ...

  3. JQuery：cookie插件

    JQuery居然没有操作cookie相关的函数,搜了下官方有个cookie的插件. 简单使用方法: <head> <title>JQuery-Cookie插件</titl ...

  4. 使用OTP原则构建一个非阻塞的TCP服务器

    http://erlangcentral.org/wiki/index.php/Building_a_Non-blocking_TCP_server_using_OTP_principles CONT ...

  5. Tomcat下部署SpringBoot

    SpringBoot默认支持Tomcat7及以上版本(SpringBoot默认支持servlet3.1版本及以上,Tomcat6只支持到servlet2.5) 测试环境:jdk1.8 + tomcat ...

  6. 微信小程序预览图片

    选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml ...

  7. C++ Primer章课后编程问题

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3V1Z2xlMjAxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  8. Linux四个常用的指挥机关处理具体的解释

    原版的Blog.转载请注明出处 http://blog.csdn.net/hello_hwc?viewmode=contents 权限 对于文件 r 可读 w 可写 x 可运行 对于文件夹 r 能够列 ...

  9. MyEclipse各种版本号注冊码

    一:MyEclipse_6.0.1GA_E3.3.1_FullStackInstaller注冊码 Subscriber:javp Subscription Code:wLR7ZL-655551-685 ...

  10. OpenCV调试利器——Image Watch插件的安装和使用

    各大编译工具在调试的时候都可以实时查看变量的值,了解变量值的变动情况,在图像处理相关的程序调试中,是否也可以实时查看内存中图像变量的图形信息以及图像上指定区域或点位的数值变化情况呢? 在工业机器视觉领 ...