第一种

<!DOCTYPE html>

<html>

<head>

    <meta charset='UTF-8'>

    <title>checked</title>

    <script type="text/javascript" src='http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js'></script>

</head>

<body>

<form>

<input  type='checkbox' >

<input  type='checkbox' >

<input  type='checkbox' >

<input type='checkbox' >

<input type='checkbox' >

    </form>

</body>

<script type="text/javascript">

    $(":checkbox").on("change",function(){

        var $checkbox = $(this);

        console.log($('input:checked').length);

    });

</script>

</html>

可以实时监听页面上有几个checkbox的值是checked

监听页面上的checkbox是否选中的更多相关文章

  1. js监听页面的scroll事件，当移到底部时触发事件

    //页面拉到底时自动加载更多 $(window).scroll(function(event){ var wScrollY = window.scrollY; // 当前滚动条位置 var wInne ...

  2. 遍历页面上的checkbox

    $("#Button1").click(function () { $("input[type='checkbox']").each(function () { ...

  3. 关于在layui中的table checkbox 默认选中设置

    一.layui版本 layui-v2.4.5 二.设置table的checkbox默认选中 总共有两种方法: 方法1:在返回的json中设置LAY_CHECKED为true,页面上的checkbox就 ...

  4. Android成长日记-Android监听事件的方法

    1. Button鼠标点击的监听事件 --setOnClickListener 2. CheckBox, ToggleButton , RadioGroup的改变事件 --setOnCheckedCh ...

  5. layui---事件监听

    在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了. 具体语法: form.on('event(过滤器值)', callback); 可以用于监听 ...

  6. Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作

    <div id="divId" class="divTable"> <div class="tableBody"> ...

  7. 监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  8. android CheckBox控件的定义及事件监听

    http://www.beijibear.com/index.php?aid=336 android CheckBox控件的定义及事件监听,本例实现CheckBox控件的定义及点击事件的监听并显示结果 ...

  9. Android CheckBox的监听事件

    1.在xml文件中定义CheckBox,一定要定义id <CheckBox android:id="@+id/beijing" android:layout_width=&q ...

随机推荐

  1. MongoDB 之C#实践

    官方驱动:https://github.com/mongodb/mongo-csharp-driver/downloads.下载后,还提供了一个酷似msdn的帮助文档. samus驱动:https:/ ...

  2. IM消息送达保证机制实现(二)：保证离线消息的可靠投递

    1.前言 本文的上篇<IM消息送达保证机制实现(一):保证在线实时消息的可靠投递>中,我们讨论了在线实时消息的投递可以通过应用层的确认.发送方的超时重传.接收方的去重等手段来保证业务层面消 ...

  3. ExtJs4 基础必备

    认识ExtJs的开发包 下载路径:http://www.sencha.com/products/extjs/download/ 解压有20多兆,别怕,真正运行的没这么大.认识下这个包的文件结构吧. b ...

  4. 【转】如何让你的Android SDK下载或者升级快如闪电

    准备学习Android开发,但是Android SDK Manager界面都刷不出来,今天看到了一篇文章,顿时就解决了,原文地址http://qichaochen.github.io/2014/12/ ...

  5. Android NDK开发Hello Word!

    在之前的博客中已经为大家介绍了,如何在win环境下配置DNK程序,本篇我将带大家实现一个简单的Hello jni程序,让大家真正感受一下NDK开发的魅力.这里我们选择使用C+JAVA开发Android ...

  6. UWP开发之Mvvmlight实践四：{x:bind}和{Binding}区别详解

    {x:bind}是随着UWP被推出而被添加的,可以说是Win10 UWP开发专有扩展.虽然 {x:Bind} 缺少{Binding} 中的一些功能,但它运行时所花费的时间和使用的内存量均比 {Bind ...

  7. C# 复制一个Word文档的部分或全部内容到另一个Word文档

    C# 复制一个Word文档的部分或全部内容到另一个Word文档 我最近喜欢折腾Office软件相关的东西,想把很多Office软件提供的功能用.NET来实现,如果后期能把它用来开发一点我自己的小应用程 ...

  8. iOS 如何自定义UISearchBar 中textField的高度

    iOS 如何自定义UISearchBar 中textField的高度 只需设置下边的方法就可以 [_searchBar setSearchFieldBackgroundImage:[UIImage i ...

  9. 1Z0-053 争议题目解析697

    1Z0-053 争议题目解析697 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 697.Which statement is true about a Scheduler-gen ...

  10. 1Z0-053 争议题目解析698

    1Z0-053 争议题目解析698 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 698.In your production database, you: -Are using ...