zoukankan      html  css  js  c++  java
  • 利用JQuery实现全选和反选的几种方法

    前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现。

    如图:要实现的效果是点击全选框全部选中,再点击全部不选中

    方法一思路:1、导入jQuery库,这个网上可以下载,是免费开源的,2、设置class为fruit,通过prop设置它们的属性。

    方法一:jQuery代码:

     1       //定义标识,true表示选中
     2         var chkall = true;
     3         $(function () {
     4             //全选按钮设置点击事件
     5             $("#btnAll").click(function () {
     6                 //1、循环设置其它多选框选中状态,跟标识用的变量一样
     7                 $(".fruit").prop("checked", chkall);
     8                 //2、标识的变量取反
     9                 chkall = !chkall;
    10             })
    11         })

    方法二思路:通过表单过滤器获取所有的单选框,再循环设置checked属性。

    方法二:jQuery代码:

     1         $(function () {
     2                 //得到全选框的值
     3                 var $checked = this.checked;
     4                 //通过表单过滤器得到所有单选框
     5                 $("input[class=fruit]").each(function () {
     6                     //单选框的值与全选框的值保持一致
     7                     this.checked = $checked;
     8                 })
     9             })
    10         })

    最后补充说明:JQuery一般获取属性我们会用Attr,设置属性的值我们用prop.

  • 相关阅读:
    Balance_01背包
    4 Values whose Sum is 0_upper_bound&&ower_bound
    Newspaper Headline_set(upper_bound)
    lower_bound和upper_bound算法
    Blocks_DP&&矩阵快速幂
    All X_数的快速幂
    Training little cats_矩阵快速幂
    Raising Modulo Numbers_快速幂取模算法
    Defining Python Source Code Encodings
    Python ord(char)
  • 原文地址:https://www.cnblogs.com/xiaoyuanding/p/3895897.html
Copyright © 2011-2022 走看看