jQuery 循环获取checkbox复选框的值，checkbox全选、全不选、反选

川长思鸟来 2022-11-08 14:28 197阅读 0赞

前端页面html

js代码 - 循环获取checkbox复选框的值

//获取复选框checkbox选中的个数
    	/*var size = $("input:checkbox:checked").length; alert("size = "+ size);*/
    
    	//定义数组用来存储复选框的value
    	var checkedValueList = [];
    	//each() 方法为每个匹配元素规定要运行的函数，循环遍历，将复选框选中的value放到数组中
    	$("input:checkbox:checked").each(function(){ 
    	    //alert($(this).val());
    	    //将选中的checkbox的value放到数组中
    	    checkedValueList.push($(this).val());
    	});
    	console.log("checkedValueList = " + checkedValueList);

checkbox全选、全不选、反选功能

// 全选功能
                checkAll:function() { 
                    // 将所有的name属性等于 'ids' 的input元素的checked设置为true（checkbox选中）
                    $("input[name='ids']").prop("checked",true);
                    console.log("选中个数 size = "+ $("input:checkbox:checked").length)
                },
                // 全不选功能
                checkNoAll:function() { 
                    // checked全设置为false
                    $("input[name='ids']").prop("checked",false);
                    console.log("选中个数 size = "+ $("input:checkbox:checked").length)
                },
                // 反选功能
                reverseCheck:function() { 
                    //循环
                    $("input[name='ids']").each(function(){ 
                        //选中的改为非选中，非选中的改为选中 prop函数，实现如果选中返回ture
                        if($(this).prop("checked")) { 
                            $(this).prop("checked", false);
                        }else{ 
                            $(this).prop("checked", true);
                        }
                    });
                    //console.log("反选 - 选中个数 size = "+ $("input:checkbox:checked").length)
                },

> jQuery 1.6及以后版本中，建议使用 `prop()` 函数来设置或获取 `checked、selected、disabled` 等属性，其它能够用prop()实现的操作，也尽量使用prop()函数