jQuery全选/全不选/反选

最新推荐文章于 2023-05-25 08:32:18 发布
最新推荐文章于 2023-05-25 08:32:18 发布
阅读量288 收藏
点赞数
分类专栏： 前端 文章标签： jQuery全选/全不选/反选 jQuery 反选 全选/全不选 全选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I_was_the_first/article/details/84031119
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复选框的全选和全不选</title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
        <script type="text/javascript">
            //$(function(){})等同于$(document).ready();
            $(function(){
                //一、为上面的复选框绑定单击事件
                $("#selectAll").click(function(){
                    if (this.checked==true) {
                        //如果上面的复选框被选中
                        $("input[name='ids']").prop("checked",true);
                    } else{
                        //上面的复选框没能被选中
                        $("input[name='ids']").prop("checked",false);
                    }
                    //$("input[name='ids']").prop("checked",this.checked);
                    
                    
                    
                });
                //反向选择
                $("#btn3").click(function(){
                    $("input[name='ids']").each(function(){
                    $(this).prop('checked',!$(this).prop('checked'));
                    });
                });
            });
            
            
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" cellspacing="0" cellpadding="5">
                <tr>
                    <th><input type="checkbox" id="selectAll"/>全选/<a href="javascript:void(0)" id="btn3">反选</a></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="ids"/></td>
                    <td>0001</td>
                    <td>张三</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids"/></td>
                    <td>0002</td>
                    <td>李四</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids"/></td>
                    <td>0003</td>
                    <td>王五</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids"/></td>
                    <td>0004</td>
                    <td>赵六</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids"/></td>
                    <td>0005</td>
                    <td>田七</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids"/></td>
                    <td>0006</td>
                    <td>老八</td>
                    <td>18</td>
                </tr>
                
            </tbody>
            
        </table>
    </body>
</html>

 

暮秋*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery全选/全不选/反选另一种实现方法(配合原生js)
10-27
接下来，我们需要监听用户对“全选/不选”和“反选”按钮的操作。这可以通过jQuery的`$(document).ready()`函数来实现，当文档加载完成时执行其中的代码： ```javascript $(document).ready(function(){ // ... })...
利用jQuery实现CheckBox全选/全不选/反选的简单代码
11-24
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
js, jQuery实现全选、反选功能
12-29
js ，jq实现全选、反选功能： js:思路：1.点击全选按钮实现，下面内容全选，与反选 2.下面有一个没有选中时，全选按钮不勾选，当全部选中时才全选。这里引入一个计数器，来判断是否全部选中。 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> </head> <body> 全选<input type=checkbox name=allchoose id=box onclick=chk()/> <div id=lower> 苹果<input type=checkbox
jquery 全选 反选
01-27 109
jquery 全选 反选 jQuery CheckBox全选Learning, by 木公.其实这个只要熟悉了jQuery，基本上都能写得出来。在没接触jQuery之前，使用原生的JS写，虽然代码不是很多，但是也挺麻烦的。在这里不得不赞叹jQuery的选择器是多么的...
jQuery操作checkbox，radio, select 功能
昕颖的专栏
10-29 510
 要引用jqery.js$(function () {    // 全选    $(#hobby_all).click(function () {        $(input[name="hobby[]"]).attr("checked",true);    }) ;    // 反选    $(#hobby_anti_all).click(function () {  
jQuery全选反选
xiaosevenliang的专栏
03-19 303
$("#checkAll").click(function(){         $(".pageTablePub :checkbox").each(function(){             if ( $("#checkAll").is(':checked') ){                 $(this).prop("checked",true);             }
Jquery全选反选
ghr1249184750的博客
09-14 158
body内容 <input type="checkbox" />菊花台 <br /> <input type="checkbox" />千里之外 <br /> <input type="checkbox" />青花瓷 <br /> <input type="checkbox" />兰亭序 <br /> <input type="check
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
jquery全选反选
lishuaileibo的博客
12-18 146
charset="UTF-8">       *{   margin: 0px auto;   padding: 0px;   }   .d{   width: 500px;           }         typ
jQuery全选/;反选
DJSYPO的博客
01-07 272
function cheAll(){                 var cek = $("#che")[0].checked;                 var ck = $("input[name='ck']");                 for(var i = 0; i                     ck[i].checked = cek;      
Jquery 全选、反选
天地会
05-06 410
Jquery脚本代码——————————————————————$(function() {$('#inputCheck').click(function() {$("input[name='Checkbox1']").attr("checked", $(this).attr("checked"));});}); // 全选$(function() {$("#select_reverse").click(function() {$("input[name='Checkbox1']").each(functi
jquery全选反选功能
yingshuangtu的博客
08-16 1478
代码 使用jquery超简洁代码实现点击按钮，全选，反选 功能代码 <script> //全选/取消全选 $("#all").click(function(){ $(":checkbox").prop("checked",true); }) //反选 $("#reverse").click(function(){ $(":checkbox").each(function(i,e){ $(e).prop("checked",!$(e).prop
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1499
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全选反选 简洁易用
George的博客
04-26 202
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;demo&lt;/title&gt; &lt;style&gt; &lt;/style&gt; &lt;script src="https://cdn.b
jquery实现全选反选操作
Dearan33的博客
12-09 530
jquery实现多选复选操作
jquery实现全选 反选功能
Zhang_xiao_pang的博客
10-09 388
如何利用jquery是先简单的全选反选功能 首先我们需要载页面中引入jQuery``` 然后我们需要引入input标签 ` 全选 反选 `
Jquery实现 全选反选
凉城玖的博客
05-23 4927
Jquery实现 全选反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../jquery
Jquery实现全选反选
weixin_48340600的博客
09-29 428
1、根据全选按钮状态决定复选框状态 $(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) }) 2、当复选框状态发生变化时，判断被选中复选框的数量是否等于复选框的数量；等于则把全选框的状态改为true；反之为false 完整代码： $(function () { // 1. 全选 全不选功能模块 // 就
使用jquery完成九九乘法表、全选/全不选、反选功能、轮播图
最新发布
07-28
以下是使用 jQuery 实现九九乘法表、全选/全不选、反选功能和轮播图的示例代码： 1. 九九乘法表： ```html <!DOCTYPE html> <html> <head> <title>九九乘法表</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="multiplication-table"> <tbody></tbody> </table> <script> $(document).ready(function() { var table = $('#multiplication-table tbody'); for (var i = 1; i <= 9; i++) { var row = $('<tr></tr>'); for (var j = 1; j <= 9; j++) { var cell = $('<td></td>').text(i + ' × ' + j + ' = ' + (i * j)); row.append(cell); } table.append(row); } }); </script> </body> </html> ``` 2. 全选/全不选、反选功能： ```html <!DOCTYPE html> <html> <head> <title>全选/全不选、反选功能</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <label><input type="checkbox" id="check-all"> 全选/全不选</label><br> <input type="checkbox" class="checkbox-item"> Item 1<br> <input type="checkbox" class="checkbox-item"> Item 2<br> <input type="checkbox" class="checkbox-item"> Item 3<br> <button id="invert-selection">反选</button> <script> $(document).ready(function() { $('#check-all').change(function() { $('.checkbox-item').prop('checked', $(this).prop('checked')); }); $('#invert-selection').click(function() { $('.checkbox-item').each(function() { $(this).prop('checked', !$(this).prop('checked')); }); }); }); </script> </body> </html> ``` 3. 轮播图： ```html <!DOCTYPE html> <html> <head> <title>轮播图</title> <style> .slider { width: 300px; height: 200px; overflow: hidden; position: relative; } .slider img { width: 100%; height: 100%; position: absolute; transition: opacity 1s ease-in-out; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <script> $(document).ready(function() { var slider = $('.slider'); var images = slider.find('img'); var currentIndex = 0; function showImage(index) { images.css('opacity', 0); $(images[index]).css('opacity', 1); } function nextImage() { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); } setInterval(nextImage, 2000); }); </script> </body> </html> ``` 请注意替换示例中的图片路径和文件名，确保图片可以正确加载。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值