使用jQuery完成复选框的全选和全部选（对比JavaScript）

超、凢脫俗 2022-03-25 08:52 154阅读 0赞

1、案例描述

开发中，经常表格数据进行批处理，就需要快速的对列表项进行操作，比如全选和全不选。

2、jQuery代码实现

$(function(){
        //1、为复选框绑定单击事件
        $("#selectAll").click(function(){
            //方式一：
            if(this.checked == true){
                //如果复选框已经是选中状态了
                $("input[name='ids']").prop("checked",true);
            }else{
                //复选框没有被选中
                $("input[name='ids']").prop("checked",flase);
            }
            
    
            //方式二：
            $("input[name='ids']").prop("checked",this.checked);
    
        });
    });

3、JavaScript代码实现（对比）

3.1、给复选框添加onclick事件

<input type="checkbox" onclick="selectAll(this)">

3.2、编写selectAll(this)处理列表项的复选框是否勾选

<script type="text/javascript">
        function selectAll(obj){
            //如果当前复选框为选中状态，则其他都选中，否则都不选中
            //ByClassName--->通过标签class属性的名称获得对应的标签
            var allCheckbox = document.getElementByClassName("itemSelect");
            for(var i = 0; i < allCheckbox.length; i++){
                allCheckbox[i].checked = obj.checked;
            }
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery 复选框：全选和非全选

html <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我会带着你远行/ 2023年06月15日 13:28/ 0 赞/ 4 阅读

相关 jQuery复选框全选反选操作

<!DOCTYPE html> <html > <head> <title> jquery-ajax </title> <sc

刺骨的言语ヽ痛彻心扉/ 2022年08月18日 12:09/ 0 赞/ 283 阅读

相关 jQuery实现复选框的全选和反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

绝地灬酷狼/ 2022年07月11日 15:24/ 0 赞/ 234 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 280 阅读

相关 JQuery实现复选框全选

首先一种最low的方法 $("checkAll").click(function(){ var $checkRows = $("input[

冷不防/ 2022年05月14日 02:09/ 0 赞/ 325 阅读

相关使用jQuery完成复选框的全选和全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

港控/mmm°/ 2022年04月21日 22:56/ 0 赞/ 243 阅读

相关 jquery实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

喜欢ヅ旅行/ 2022年04月06日 08:10/ 0 赞/ 327 阅读

相关使用jQuery完成复选框的全选和全部选（对比JavaScript）

1、案例描述开发中，经常表格数据进行批处理，就需要快速的对列表项进行操作，比如全选和全不选。 2、jQuery代码实现 $(function(){

超、凢脫俗/ 2022年03月25日 08:52/ 0 赞/ 155 阅读

相关 jQuery实现复选框全选和全不选

第一种方法： <!--实现td框全选th框自动选的两种方法： 1.根据已经选择的td框的数量，若全选则选 2.遍历td框，若全选则选 --

旧城等待，/ 2021年12月10日 00:59/ 0 赞/ 468 阅读

相关 javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下效果分析：　　1，点击全选/全不选　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反　　2，点击反选按钮

た入场券/ 2021年11月19日 14:24/ 0 赞/ 587 阅读