zoukankan      html  css  js  c++  java
  • jquery如何判断checkbox(复选框)是否被选中 全选 反选

    好长时间没用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

  • 相关阅读:
    屏幕截图 从安卓模拟器中识别出屏幕文字
    srcset
    Bitwise and Bit Shift Operators 位运算 取反 补码
    text recognizer (OCR) Engine 光学字符识别
    删除目录下 某类名字的文件
    appmaptile
    登录框
    将代码设置的剪切板内容通过输入法软件粘贴入app搜索框
    面向问题的高级语言
    使用心理视觉来进行图像处理
  • 原文地址:https://www.cnblogs.com/mayufo/p/7090840.html
Copyright © 2011-2022 走看看