JQ对复选框全选、获取复选框的值、回选

最新推荐文章于 2024-05-18 20:34:17 发布

山顶栋人

最新推荐文章于 2024-05-18 20:34:17 发布

阅读量2.1k

点赞数 1

分类专栏：页面小技能文章标签： jquery web 前端

本文链接：https://blog.csdn.net/c2974819879/article/details/126433668

版权

页面小技能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript实现复选框的全选、全不选功能，以及获取已选复选框的值。提供了两种不同的值获取方法，并展示了如何根据预设值回选复选框。这些方法对于前端开发中的表单交互和数据处理非常实用。

摘要由CSDN通过智能技术生成

1、全选、全不选：

    function checkAllFun(a){
        if (a.checked){
            $("input[name='checkbox']:checkbox").each(function(){
                $(this).prop("checked", true);
            });
        } else {
            $("input[name='checkbox']:checkbox").each(function() {
                $(this).prop("checked", false);
            });
        }
    };

2、获取复选框的值

方法一：
            var updateProSkuIds =[];
            $('input[name="productSkuId"]:checked').each(function(){
                updateProSkuIds.push($(this).val());
            });
            if(updateProSkuIds.length == 0){
                layer.msg("你还没有选择任何要设置！");
                return;
            };
            if(updateProSkuIds.length > 1){
                layer.msg("最多只能选一条设置！");
                return;
            };


方法二：
var ids =[]; 
	    $('input[name="checkbox"]:checked').each(function(){ 
	    	ids.push($(this).val()); 
	    });

3、回选

$(function(){
		//获得所要回显的值，此处为：100,1001,200,1400
        var checkeds = '${user.userHobby}';
        //拆分为字符串数组
        var checkArray =checkeds.split(",");
        //获得所有的复选框对象
        var checkBoxAll = $("input[name='userHobby']");
        //获得所有复选框（新闻,微信,论坛，问答，博客，平媒）的value值，然后，用checkArray中的值和他们比较，如果有，则说明该复选框被选中
        for(var i=0;i<checkArray.length;i++){
            //获取所有复选框对象的value属性，然后，用checkArray[i]和他们匹配，如果有，则说明他应被选中
            $.each(checkBoxAll,function(j,checkbox){
                //获取复选框的value属性
                var checkValue=$(checkbox).val();
                if(checkArray[i]==checkValue){
                    $(checkbox).attr("checked",true);
                }
            })
        }
	})