jQuery实现全选反选功能

最新推荐文章于 2023-05-25 08:32:18 发布
原创 最新推荐文章于 2023-05-25 08:32:18 发布 · 696 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #全选 #取消全选 #反选

本文介绍了一种使用jQuery简化DOM操作的方法，通过实例演示了如何实现表格中复选框的全选与反选功能。具体包括jQuery的选择器使用、事件绑定以及属性操作等关键技术点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<head>
    <title></title>
    <!-- <script src="jquery-1.9.1.js" type="text/javascript"></script>-->
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <style type="text/css">
        img
        {
            width: 50px;
            height: 50px;
        }
        table
        {
            width: 600px;
            height: 400px;
        }
        table tr td
        {
            border: solid 1px #eee;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#Checkbox7').click(function () {
                if ($(this).attr("checked")) {//全选
                    $('table input[type=checkbox]').attr('checked', true);
                    $('span').text('取消全选');
                }
                else {
                    $('table input[type=checkbox]').attr('checked', false);
                    $('span').text('全选');
                }
            })


            $("#Checkbox8").click(function () {//反选  
                $('table input[type=checkbox]').each(function () {


                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
        })
             
    </script>
</head>
<body>
    <div>
        <input id="Checkbox7" type="checkbox" /><span>全选</span><input id="Checkbox8" type="checkbox" />反选</div>
    <input id="Button1" type="button" value="button" />
    <table>
        <tr>
            <td>
                操作
            </td>
            <td>
                编号
            </td>
            <td>
                名称
            </td>
            <td>
                作者
            </td>
            <td>
                封面
            </td>
            <td>
                单价
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox1" type="checkbox" />
            </td>
            <td>
                001
            </td>
            <td>
                三国演义
            </td>
            <td>
                罗贯中
            </td>
            <td>
                <img src="images/2.jpg" />
            </td>
            <td>
                45
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox2" type="checkbox" />
            </td>
            <td>
                002
            </td>
            <td>
                西游记
            </td>
            <td>
                吴承恩
            </td>
            <td>
                <img src="images/3.jpg" />
            </td>
            <td>
                40
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox3" type="checkbox" />
            </td>
            <td>
                003
            </td>
            <td>
                水浒传
            </td>
            <td>
                施耐庵
            </td>
            <td>
                <img src="images/4.jpg" />
            </td>
            <td>
                50
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox4" type="checkbox" />
            </td>
            <td>
                004
            </td>
            <td>
                红楼梦
            </td>
            <td>
                曹雪芹
            </td>
            <td>
                <img src="images/5.jpg" />
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox5" type="checkbox" />
            </td>
            <td>
                005
            </td>
            <td>
                家
            </td>
            <td>
                巴金
            </td>
            <td>
                <img src="images/6.jpg" />
            </td>
            <td>
                45
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox6" type="checkbox" />
            </td>
            <td>
                006
            </td>
            <td>
                茶馆
            </td>
            <td>
                老舍
            </td>
            <td>
                <img src="images/7.jpg" />
            </td>
            <td>
                35
            </td>
        </tr>
    </table>
</body>
全选、反选、获取选中值
weixin_33675507的博客
06-19 359
<html><head><title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> ...
jquery实现全选、反选、获得所有选中的checkbox (记录专用
yjq907的博客
11-09 865
7个不同的checkbox状态 1、全选 ? 1 2 3 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） ? 1 2 3
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1698
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实现全选、反选按钮
var_Xu的博客
04-16 1万+
实现效果： 点击全选，复选框全部被选中 取消全选，复选框全部被清空
jQuery、html、JavaScript实现全选、反选、批量删除
拉莫帅的博客
01-07 8132
方式一：重点内容 input type=&quot;button&quot; onclick=&quot;delAll()&quot; value=&quot;批量删除&quot; /&gt; input type=&quot;button&quot; onclick=&quot;che()&quot; value=&quot;全选/反选&quot; /&gt;
关于jquery全选反选（多方法）
安宇轩~
11-21 693
这是一个简单的jquery全选反选代码段如下： 全选反选 接着上面的代码进行解析 然鹅，我们还有简单的方法： <script> //全选框事件 function All() { //遍历子选框 $(".CK").each(function () //可用多种选...
JQuery实现全选、全不选和反选功能
热门推荐
林小米的博客
12-12 4万+
项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下： 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态，        1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。        1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的
使用JQuery实现全选全部选和反选
qq_32077521的博客
10-21 517
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <scrip...
jQuery实现表单全选、全不选以及反选的功能
lep的博客
06-22 4566
本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单：<!-- HTML结构 --> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言：</legend> <fieldset> <p><label class="selectAll"><input type="check
jquery实现全选反选
weixin_46047399的博客
06-01 929
1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:..
jQuery实现的全选、反选和不选功能
weixin_30371469的博客
07-18 207
适用于网页多选后需要进行批量操作的场景（如批量删除等）。如有问题希望大家可以指正。谢谢~~ HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮 <ul id="list"> <li><label><input type="checkbox" value="1"> 1.时...
jQuery全选反选全不选
qimingnanhhh的博客
11-10 6819
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jQuery/jquery-2.1.1.js" ></script> <script> $(
jquery实现复选框(checkbox)的全选与反选
青松之竹_Java博客
10-06 2万+
介绍一下jquery实现checkbox的全选与反选
jQuery实现表格全选、反选、删除一行或多行、增加一行
liu_111111的专栏
05-06 1万+
table tr td         {             border: solid 1px #eee;         }                 $(function () {             $('#Checkbox7').click(function () {                 if ($(this).attr("checked"
AJAX实现用户登录
liu_111111的专栏
05-20 6532
-----------------------WebService1--------------------------------  // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。     [System.Web.Script.Services.ScriptService]     public class WebService1 :
AJAX获取服务器当前时间
liu_111111的专栏
05-20 3502
------------------------------ WebService1.asmx---------------------------------- // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。     [System.Web.Script.Services.ScriptService]     public class We
animate动画效果（泪奔的小孩）stop和delay的用法
liu_111111的专栏
05-06 3193
img     {         width:150px;         height:200px;         position:relative;         }        td{width:150px;height:200px;}     table{border:solid 1px black;}                 $(function
jQuery根据纬度经度查看地图
liu_111111的专栏
05-07 2787
//在这里要注意js的引入顺序                                             $(function () {         function latlong() {             return new google.maps.LatLng($("#lat").val(), $
jQuery插件中validate的使用
liu_111111的专栏
05-07 2369
•validate简介： –自带验证规则，包括必填，数字，url等 –验证提示信息(就是验证失败时候的提示信息，要想显示中文需要插件支持) –多种事件触发，不仅可以在提交(单击submit类型的按钮)时，还可以在keyup,blur事件中触发验证 –4.允许自定义验证规则 •validate使用方法: –引入Jquery包 –引入jquery.va
Jquery实现全选与反选功能的Checkbox插件
JQuery全选反选Checkbox是指在网页上实现一个或多个复选框（Checkbox）元素的全选和反选操作。通过jQuery，我们可以非常简单地实现这一功能，提高用户界面的交互性。以下是关于JQuery全选反选Checkbox的详细知识点：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值