好长时间没用jq, 之前用的都是ng。

想着随便参考一下,结果被坑。因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google

给出坑人文章的链接 http://www.cnblogs.com/yuzhongwusan/archive/2009/02/27/1399264.html

虽然已经解决,但是我决定重新写一篇!!!

如何判断checkbox是否选中?

文中说用 attr() 在实际判断的时候都是不可用的,判断不出来!!!

应该使用


if ($("#id").is(":checked")) {
// 存在
} else {
// 不存在
}

看到这里除了checked 还能判断什么呢?

除了判断checkout好像没有看到hover,类似于这种应该如何判断呢?

我们知道 如果$() 选择器找到一个元素必定存在一个长度,因此我们也可以根据长度去判断

if ($('#id:hover').length) {
// 元素存在
} else {
// 元素不存在
}

感觉有点跑偏了,回归正题。。。

如果修改呢,很多人用的attr,removeAttr, 这些都是错误的,尤其是remove属性后用attr无法加回来

这里应该使用pop,而不是attr

官方建议 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

代码如下

<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p> <fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" class="case" /> Option 1</label></p>
<p><label><input type="checkbox" class="case" /> Option 2</label></p>
<p><label><input type="checkbox" class="case" /> Option 3</label></p>
<p><label><input type="checkbox" class="case" /> Option 4</label></p>
</fieldset>
</form>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

demo http://jsfiddle.net/mayufo/8dxx5fjk/

这时候傻呵呵以为你做完了就错了!!!你还没有考虑全选后取消一个和全部一个个选中后全选按钮

与全选按钮关联

$('.case').on('click', function () {
if ($('.case').length == $('.case:checked').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
})

demo http://jsfiddle.net/mayufo/8dxx5fjk/1/

参考文章

http://www.cnblogs.com/zhwl/p/3520162.html

jquery如何判断checkbox(复选框)是否被选中 全选 反选的更多相关文章

  1. 复选框(checkox)全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  2. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  3. jquery关于checkbox复选框是否被选中的问题

    本人在项目中需要用到,判断哪些复选框被用户选中.自然而然想到用 if($('').attr('checked') == true) 但是不管有没有选,$('').attr('checked')返回的都 ...

  4. 判断easyUI tree 节点复选框是否被选中的方法。将选中的节点高亮显示的方法

    在datagrid tree中如何判断某个节点的复选框是否被选中? 我们可以通过HTML结构去分析: 1.节点未选中前 2.节点选中后 所以节点被选中前和选中后,html中的class类是用区分的. ...

  5. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  6. php数组转换字符串及复选框如何勾选中

    php数组转换字符串及复选框如何勾选中,应用到函数 implode  explode 复选框被选中后如何保存数据,表单提交过来为数组,要转换字符串 用到函数implode if(!empty($_PO ...

  7. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  8. jquery checkbox 选中 全选 插件

    checkbox  选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...

  9. js进阶 9-15 多选框如何限制选中数目

    js进阶 9-15 多选框如何限制选中数目 一.总结 一句话总结: 1.多选框如何限制选中数目? 没点击选择一次,来统计现在总共选了多少个,如果超出,就给onclick事件返回false,取消oncl ...

  10. 折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

    折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

随机推荐

  1. [ kvm ] 进程的处理器亲和性和vCPU的绑定

    cpu调用进程或线程的方式: Linux内核的进程调度器根据自有的调度策略将系统中的一个进程调度到某个CPU上执行.一个进程在前一个执行时间是在cpuM上运行,而在后一个执行时间则是在cpuN上运行, ...

  2. js实现侧边栏信息展示效果

    目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...

  3. Go语言,互斥锁使用

    package main import ( "fmt" "runtime" "sync" ) var ( counter int wg sy ...

  4. 【转】Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址

    Android循环滚动广告条的完美实现,封装方便,平滑过渡,从网络加载图片,点击广告进入对应网址 关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddr ...

  5. (十一)mysql备份之物理备份xtrabackup

    (1)备份介绍 (2)下载安装xtrabackup 官网:https://www.percona.com/downloads/XtraBackup/LATEST/ 我选择yum安装,centos版本7 ...

  6. Spring:面向切片编程

    在之前我们记录Spring的随笔当中,都是记录的Spring如何对对象进行注入,如何对对象的属性值进行注入,即我们讲解的很大部分都是Spring的其中一个核心概念——依赖注入(或者说是控制翻转,IOC ...

  7. 链表学习二:链表反转与查找倒数第K个

    //单链表反转 ListNode* RevertList(ListNode* m_pHead){ ListNode* pCurrent = m_pHead; ListNode* pPrev=NULL; ...

  8. SQL Loader with utf8

    alter this line in your control file characterset UTF8 to this characterset UTF8 length semantics ch ...

  9. Centos7下安装7za 及7za常用命令

    安装必备环境 yum install kernel-devel kernel-headers gcc-c++ make bzip2 下载源码(16.02版本,2016.10.04 publish) w ...

  10. 【莫队算法】【权值分块】bzoj3236 [Ahoi2013]作业

    莫队显然.然后维护转移的时候如果用树状数组,则很容易TLE.所以用权值分块维护转移. 总复杂度O(m*sqrt(n)). #include<cstdio> #include<algo ...