zoukankan      html  css  js  c++  java
  • 关于checkbox的一些jquery操作

    表单在前端开发中是经常会遇到的,其中自然也少不了checkbox复选框,对于复选框的操作无外乎有以下三种:全选,全不选,反选。下面零度逍遥就给大家分析分析。

    一、checkbox全选

    大家都知道选择checkbox的方式是给它加上属性checked:'checked',所以用jquery的方式就可以写成这样:

    $('input[type=button]').click(function(){
        $('input[type=checkbox]').attr('checked','checked');
    })

    这样点击按钮就是一个全选的操作,但其实不知道大家知道不,checkbox的这样添加属性并不是w3c所推荐的,翻看她官网的推荐,checked的属性值是一个布尔值,所以上述设置checkbox的属性checked应该为true,代码如下:.

    $('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked',true);
    })

    二、checkbox全不选

    同全选,全不选刚好相反,可以这样写:

    $('input[type=button]').click(function(){
        $('input[type=checkbox]').removeattr('checked');
    })

    同理,最好还是写成这样:

    $('input[type=button]').click(function(){ $('input[type=checkbox]').attr('checked',false); })

    三、checkbox反选

    反选的逻辑就是把选中状态的变成非选中状态,把非选中状态的变成选中状态,通过上面我们可以知道checked的值是个布尔值,这样我们就能拿过来进行判断,所以代码可以写成:

    $('input[type=button]').click(function(){
        $('input[type=checkbox]').attr('checked',!$(this).attr('checked'));
    })

    这样就可以达成目的,不过这里要提到的一点是,在1.10.x的jquery中可能会无法实现上述功能,这时你需要加载个其他版本的jquery,这应该是jquery的一个小bug,具体的各位可以去测试一下。

  • 相关阅读:
    CAP 可用性理解
    如何真正理解设计模式
    jdk concurrent 中 AbstractQueuedSynchronizer uml 图.
    test 博客园功能 和 搜索 seo 能力
    异或运算进行两数交换
    基本排序之冒泡排序
    对数器的使用(用来生成随机数组来判断排序算法是否正确)
    全双工,半双工,单工的概念
    mac下彻底卸载mysql方法
    AngularJs学习第一课 Hello World
  • 原文地址:https://www.cnblogs.com/lingdublog/p/6495638.html
Copyright © 2011-2022 走看看