jQuery实现全选、不选和反选功能

最新推荐文章于 2023-06-25 21:00:00 发布
最新推荐文章于 2023-06-25 21:00:00 发布
阅读量112 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/qianxuebing/p/9835255.html
版权

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>
    <div 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>
    </div>

    <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() {

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

            //全选 
            $("#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>

　　

 

转载于:https://www.cnblogs.com/qianxuebing/p/9835255.html

denghous8817
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery实现全选、全不选和反选功能
Junit的博客
05-16 459
JQuery实现全选、全不选和反选功能阅读数：10586        项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，       1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。       1.2、当点击子复选框时，'...
使用jQuery实现全选，全不选和反选的效果
u_u2020的博客
05-16 1126
使用jQuery实现全选，全不选和反选的效果 上一篇我们用的是JavaScript的方法实现这个效果，接下来让我们用jQ uery的方法来实现一下。 首先第一步像上一篇一样，我们来写一下它的布局，现在我用的是radio，他是一个单选框，如果给这几个input标签一个name属性且相同的话，他就只能选择一个，否则它可以选多个，在这里我们不需要name属性，我们现在不用button按钮而用input标签，其实他们的效果都一样，我们只需把input里的type属性改成button就可以了如下： .
jquery实现全选、反选、获得所有选中的checkbox (记录专用
yjq907的博客
11-09 782
7个不同的checkbox状态 1、全选 ? 1 2 3 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） ? 1 2 3
dataTable实现全选以及批量操作
han_xiao_xiao的博客
07-21 3486
一、问题描述以及解决思路 参考案例：dataTable如何添加多选、全选 使用jquery.dataTable的插件实现了表格，需要对表格进行批量操作，具体需求如图： 点击全选按钮实现全部选中，再点击批量处理进行处理逻辑操作（也可以进行批量删除） 解决思路： 引用jquery的dataTable的相关插件， 具体可参考官网：dataTable.select_demo 参考插件有： jquery.dataTables.min.css select.dataTables.min.css jquery.j
jquery实现全选和反选
m0_56398485的博客
08-29 1624
需求：点击全选，后面所有checkbox状态选中，当后面有一个checkbox状态没有选中时，全选取消。当后面有所有checkbox状态选中时，前面全选状态选中 ，下面就为大家实现这个效果。大家用之前记得下载一下jquery文件哦。......
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1496
input type="checkbox" name="items" value="羽毛球" />羽毛球。<input type="checkbox" name="items" value="乒乓球" />乒乓球。<input type="checkbox" name="items" value="足球" />足球。<input type="checkbox" name="items" value="篮球" />篮球。//全选/全部选复选框的状态也变成选中状态。//所有复选框的状态都变成选中状态。
jQuery实现复选框全选，全不选，反选功能
weixin_48747169的博客
03-23 2386
index.jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>Title</title> <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script&g
jquery实现简单的全选和反选功能
10-23
我们在做项目的时候，经常需要实现全选和反选功能，到网上搜了一圈，发现网上写的全选的代码，不是完整的，是有bug的。下面结合自己的项目给大家分享下。
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
jQuery实现全选、反选和不选功能
12-29
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
jquery实现全选、不选、反选的两种方法
11-25
在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为”checked”,假的为”undefined”;当用prop取值时，真的为”true”,假的为”false”。经过网上参考一些资料，及根据官方的建议这两个用法：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。 方法一： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>全选、不选、
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
dataTables——实现表单复选框全选/全不选/反选功能
weixin_43235307的博客
12-08 2529
1、html内容 <table id="carousel_figure_table" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th><input type="checkbox" id="customCheck" class="checkAll"> <label for="custom
用jQuery实现复选框全选、反选与获取选中的复选框的值
lzy_55的博客
08-29 1915
和js实现的步骤一样，先是实现全选，再是反选，最后创建函数，储存已选中的反选框的值再在全选反选中调用函数。用jQuery实现以上效果要比js简单的多。
第六十六回：DataTable的选择功能
最新发布
talk_8的专栏
06-25 838
本章回中主要介绍了DataTable的数据选择功能，选择功能分为单选和全选两种，我们分别介绍了实现这两种选择功能的整体和思路和具体操作，并且通过示例代码进行了演示。
用 jQuery 实现全选/反选功能
qq_45093219的博客
05-26 1671
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
DataTables 全选
10-26 367
动态生成的元素绑定事件 $("#example").on('click', "#checkall", function () { //代码 } 获取动态生成的元素 $("#example").find("#checkall").prop("checked", flag); <%@ Page Language="C#" AutoEv...
Windows10 反选快捷键
热门推荐
敖日格勒的专栏
06-12 2万+
Windows10 反选快捷键 当我们在选择文件时想做反选，Windows10较老版本相对复杂，我们可以根据下面的步骤来进行测试。 1.按Alt 2. Alt+H 下面是Alt+H的界面 3.按 SI SI就是在home菜单项下的反选快捷键 我们来做个试验，先选中一个文件，来测试反选其他文件。 当我们按照：选择文件-> Alt+H ->S...
jquery实现复选框全选、反选
姚家威的博客
05-18 2940
HTML: <input id="all" type="checkbox" value="" /> <label for="all">全选</label> <input id="fan" type="checkbox" value="" /> <label for="fan">反选</label> <button id="getValue">获得所有选中值</button> <ul class="lis
jQuery实现全选、全不选和反选
06-07
可以使用以下代码来实现jQuery的全选、全不选和反选功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 全不选 $("#uncheckAll").click...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值