jQuery全选反选取消实例

最新推荐文章于 2023-05-25 08:32:18 发布
最新推荐文章于 2023-05-25 08:32:18 发布
阅读量533 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miaoqinian/article/details/80582026
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消</title>
</head>
<body>

<button id="b1">全选</button>
<button id="b2">取消</button>
<button id="b3">反选</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>monicx</td>
        <td>写代码</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>jxx</td>
        <td>xxxx</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>xxx</td>
        <td>xxxx</td>
    </tr>
    </tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 全选
    $("#b1").click(function () {
        // 让所有的checkbox选中
        $("table :checkbox").prop("checked", true)
    });
    // 取消
    $("#b2").click(function () {
        // 让所有的checkbox取消选中
        $("table :checkbox").prop("checked", false)
    });
    // 反选
    $("#b3").click(function () {
//        // 找到没有选中的让它们选中
//        $("table input:not(:checked)").prop("checked", true);
//        // 找到所有选中的让它们取消选中
//        $("table input:checked").prop("checked", false);

        // 方法1：循环
        var $checkboxs = $("table input:checkbox");
//        for (let i=0;i<$checkboxs.length;i++){
//            var $currentCheckbox = $($checkboxs[i]);
//            if ($currentCheckbox.prop("checked")){
//                // 如果之前是选中的
//                $currentCheckbox.prop("checked", false);
//            }else {
//                // 之前没有选中
//                $currentCheckbox.prop("checked", true);
//            }
//        }
		//方法2：循环取反
        for (let i=0;i<$checkboxs.length;i++){
            var $currentCheckbox = $($checkboxs[i]);
            var flag = $currentCheckbox.prop("checked");
            $currentCheckbox.prop("checked", !flag)
        }

    });

</script>
</body>
</html>

miaoqinian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1029
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
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 100
jquery 全选 反选 jQuery CheckBox全选Learning, by 木公.其实这个只要熟悉了jQuery，基本上都能写得出来。在没接触jQuery之前，使用原生的JS写，虽然代码不是很多，但是也挺麻烦的。在这里不得不赞叹jQuery的选择器是多么的...
jQuery操作checkbox，radio, select 功能
昕颖的专栏
10-29 500
 要引用jqery.js$(function () {    // 全选    $(#hobby_all).click(function () {        $(input[name="hobby[]"]).attr("checked",true);    }) ;    // 反选    $(#hobby_anti_all).click(function () {  
Jquery全选反选
ghr1249184750的博客
09-14 143
body内容 <input type="checkbox" />菊花台 <br /> <input type="checkbox" />千里之外 <br /> <input type="checkbox" />青花瓷 <br /> <input type="checkbox" />兰亭序 <br /> <input type="check
laravel 全选反选
猪年大吉的博客
01-28 1021
给input设置一个class &lt;input type="checkbox" class="all"&gt; @foreach($info as $v) &lt;tr align="center"&gt; &lt;td&gt; &lt;input type="checkbox" value="{{$v-&gt;id}}"
jQuery Checkbox 全选 反选的简单实例
10-21
本文主要介绍了Checkbox的全选、反选的简单实例,需要的朋友可以参考下
jQuery 全选/反选以及单击行改变背景色实例
10-27
通过jQuery实现全选或反选以及单击行改变背景色，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
jQuery菜单实例(全选,反选,取消)
10-19
下面小编就为大家带来一篇jQuery菜单实例(全选,反选,取消)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery全选反选
胡盼的专栏
06-16 343
jquery全选反选$(document).ready(function(){ var i=true var box=$("input:checkbox") var check1=$("input:button[name='quanxuan']") var check2=$("input:button[name='fanxuan']") /* check1.click(function(){ if(i){ box.prop("checked",true); i=false;
用JQ实现全选反选
逸 轩的博客
04-28 936
用JQ实现全选反选 我们先写下html 这里我们用简单的表格来一个小案例 <table> <tr> <th>序号 <input type="checkbox" id="checkedAll"></th> <th>名称</th> <th>价格</th> <th>数量</th> </tr> <tr>
Jquery实现全选反选
weixin_48340600的博客
09-29 407
1、根据全选按钮状态决定复选框状态 $(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) }) 2、当复选框状态发生变化时，判断被选中复选框的数量是否等于复选框的数量；等于则把全选框的状态改为true；反之为false 完整代码： $(function () { // 1. 全选 全不选功能模块 // 就
jquery实现全选、反选、获得所有选中的checkbox (记录专用
yjq907的博客
11-09 765
7个不同的checkbox状态 1、全选 ? 1 2 3 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） ? 1 2 3
jquery实现全选反选
weixin_45817492的博客
04-06 196
jquery实现全选全不选一、具体要求：二、思路：三、具体代码： 一、具体要求： 1、当点击’全选’按钮时，页面中所有的复选框都应该为选中状态。 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选’按钮应该是’选中’状态。 3、点点击’全不选’按钮时，当前页面的所有复选框置为非选中状态。 4、当点击’反选’按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1475
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实现全选反选功能
iteye_8029的博客
04-22 70
全选功能 $(function () { $('#allchecked').click(function () { if ($('#allchecked:checked')) { $('td input').attr('checked', true); } if (!$('#allchecked').attr('checked')) { $('td input').att...
jQuery全选反选
xiaosevenliang的专栏
03-19 290
$("#checkAll").click(function(){         $(".pageTablePub :checkbox").each(function(){             if ( $("#checkAll").is(':checked') ){                 $(this).prop("checked",true);             }
jquery全选反选不选
最新发布
12-20
以下是基于jQuery实现全选、反选和不选的代码示例： 1. 全选： ```javascript $("#selectAll").click(function(){ $("#checkBoxList :checkbox").prop("checked", true); }); ``` 2. 反选： ```javascript $("#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值