CheckBox jquery将多选的值存在某个字段

33 篇文章 4 订阅

需求:将选中的值存在隐藏域id为ids和names中

<span id="ckcount">已经选中0条合同类别</span>
<input id="sellpactname_4" type="checkbox" name="sellpactname" onclick="Cek('4','软件开发')" value="4" /><label for="sellpactname_4">软件开发</label>
<input id="sellpactname_12" type="checkbox" name="sellpactname" onclick="Cek('12','域名/主机')" value="12" /><label for="sellpactname_12">域名/主机</label>
<input id="sellpactname_28" type="checkbox" name="sellpactname" onclick="Cek('28','技术服务合作')" value="28" /><label for="sellpactname_28">技术服务合作</label>
<input id="sellpactname_29" type="checkbox" name="sellpactname" onclick="Cek('29','战略合作协议')" value="29" /><label for="sellpactname_29">战略合作协议</label>

<input type="hidden" id="ids" />
<input type="hidden" id="names" />
var check_name = [];//定义一个全局变量
function Cek(id, name) {
    var obj = $('[name="sellpactname"]');
    var checked_counts = 0;
    for(var i=0;i<obj.length;i++){
        if (obj[i].checked) {
            checked_counts++;
        }
    }
    $("#ckcount").html("已经选中"+checked_counts+"条合同类别");
    check_val = [];
    for(k in obj){
        if(obj[k].checked && obj[k].value != "")//获取复选框已选中的值或复选框传来的实际值
            check_val.push(obj[k].value);
    }
    check_name.push({
        id: id,
        name: name
    });//将选中的值赋值给全局变量中

    check_name = Es5duplicate(check_name, "id")//调用去重方法,避免点击Cek(id,name)方法时选中和取消而触发该事件,导致同样的值添加了两次

    var filterList = [];
    for(item in check_val){
        var a = check_name.filter(val => val.id == check_val[item]);//获取积累的check_name和已选中的check_val共同的id,通过共同的id过滤已经取消的id得到最终的filterList
        filterList.push({
            id:a[0].id,
            name:a[0].name
        });
    }
    
    var ids=[];
    var names=[];
    filterList.map((item) =>{
        ids.push(item.id);
        names.push(item.name);
    })//filterList最后将值赋值给局部变量ids和names,再通过toString()将数组变成以逗号隔开的字符串类型
    $("#ids").val(ids.toString());
    $("#names").val(names.toString());
}

//ES5原生去重办法
function Es5duplicate(arr,type){
    var newArr = [];
    var tArr = [];
    if(arr.length == 0){
        return arr;
    }else{
        if(type){
            for(var i = 0; i < arr.length;i++){
                if(!tArr[arr[i][type]]){
                    newArr.push(arr[i]);
                    tArr[arr[i][type]] = true;
                }
            }
            return newArr;
        }else{
            for(var i = 0; i < arr.length;i++){
                if(!tArr[arr[i]]){
                    newArr.push(arr[i]);
                    tArr[arr[i]] = true;
                }
            }
            return newArr;
        }
    }
}

参考文章
js筛选出两个数组相同的值
js数组去重以及数组内对象去重
从数组对象中抓取指定的对象属性值、将对象id存到ids中,并返回新数组对象列表

有些需求教人头疼,但整理出来后,他就是你自己曾经迈过的坎,象征着你曾付出的心血,你的进步,你的能力。
只有一步一步迈过这些坎的人,才能真正的体会,对未来的信心,对自我的肯定。
书山有路勤为径,苦海无涯苦作舟!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值