jQuery如何实现全选、不选和反选功能？（代码详解）-js教程-PHP中文网

首页

web前端

js教程

jQuery如何实现全选、不选和反选功能？（代码详解）

青灯夜游

Oct 25, 2018 pm 04:27 PM

jquery 全选反选

本篇文章给大家带来的内容是介绍jQuery实现全选、不选和反选功能的方法（代码详解）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

jQuery结合Font Awesome字体图标实现全选、不选和反选功能

Font Awesome字体图标链接地址：http://www.fontawesome.com.cn/faicons/

效果：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />

    <style type="text/css">
        label {
            display: inline-flex;
            display: -webkit-inline-flex;
            position: relative;
            cursor: pointer;
            width: 6%;
        }
        
        .box {
            cursor: pointer;
            width: 16px;
            height: 16px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid lightblue;
            background: lightblue;
        }
        
        .fa-check {
            position: absolute;
            top: 3px;
            left: 2px;
            color: #fff;
            border: none;
        }
        
    </style>

</head>

<body>
    <p class="wrapper">
        <label>
			<input type="checkbox" class="box"/>
			<span class="remeber">
				香蕉
			</span>
			<i class="fa fa-fw"></i>
		</label>
        <label class="wrapper">
			<input type="checkbox" class="box" />
			<span class="remeber">
				苹果
			</span>
			<i class="fa fa-fw"></i>
		</label>
        <label class="wrapper">
			<input type="checkbox" class="box"/>
			<span class="remeber">
				西瓜
			</span>
			<i class="fa fa-fw"></i>
		</label>
        <label class="wrapper">
			<input type="checkbox" class="box"/>
			<span class="remeber">
				橘子
			</span>
			<i class="fa fa-fw"></i>
		</label>
    </p>

    <br>

    <input type="button" name="" id="check-all" value="全选" />
    <input type="button" name="" id="check-no" value="不选" />
    <input type="button" name="" id="check-reverse" value="反选" />


    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function() {

            $(&#39;body&#39;).on("click", ".box", function() {
                $(this).parent().find(&#39;.fa&#39;).toggleClass(&#39;fa-check&#39;);
            });

            //全选 
            $("#check-all").click(function() {
                $(".wrapper label i").each(function() {
                    $(this).addClass("fa-check");
                })
            });

            //不选
            $("#check-no").click(function() {
                $(".wrapper label i").each(function() {
                    $(this).removeClass("fa-check");
                })
            });

            //反选
            $("#check-reverse").click(function() {
                $(".wrapper label i").each(function() {
                    $(this).toggleClass("fa-check");
                })
            });


        })
    </script>
</body>

</html>

登录后复制

以上是jQuery如何实现全选、不选和反选功能？（代码详解）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7503

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

word反选怎么实现 Mar 19, 2024 pm 07:58 PM

我们在很多图形编辑软件里经常听到反选的操作，在word文档里我们能不能实现反选呢？其实，word办公软件功能是比较强大的，即便没有很直接的反选工具可以一键实现内容反选，我们也可以通过变通的方法，完成word反选，如果你在工作中遇到word反选的操作要求，赶快来这里看看word反选怎么操作吧。1、首先，我们新建并打开一个word文档，我们需要输入一些文字内容。2、我们选择部分文字，给它的字体颜色设置为红色，如下图所示：3、下边，我们在工具栏找到【查找】，下拉点击【高级查找】选项，随后，将查找和替换

jQuery引用方法详解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解：快速上手指南jQuery是一个流行的JavaScript库，被广泛用于网站开发中，它简化了JavaScript编程，并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法，并提供具体的代码示例，帮助读者快速上手。引入jQuery首先，我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入，也可以下载

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

如何判断jQuery元素是否具有特定属性？ Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属

了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s

See all articles

jQuery如何实现全选、不选和反选功能？（代码详解）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题