我是靠谱客的博主 长情睫毛,最近开发中收集的这篇文章主要介绍jQuery 循环获取checkbox复选框的值,checkbox全选、全不选、反选,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

前端页面html

 	<tr v-for="(log,index) in logList">
    	<!--  v-bind:value绑定 -->
    	<td><input name="ids" :value="log.logId" type="checkbox"></td>
    </tr>

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()函数

最后

以上就是长情睫毛为你收集整理的jQuery 循环获取checkbox复选框的值,checkbox全选、全不选、反选的全部内容,希望文章能够帮你解决jQuery 循环获取checkbox复选框的值,checkbox全选、全不选、反选所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部