多选框展示值选择，并设置选中状态不改变

最新推荐文章于 2024-11-29 11:17:07 发布

一直很笨

最新推荐文章于 2024-11-29 11:17:07 发布

阅读量729

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/yzhbyssgdbd123/article/details/99286059

前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在页面加载完成后，利用JavaScript获取URL中的参数，并监听多选框的选择状态。通过示例代码展示了如何遍历多选框，获取选中项的值并设置选中状态不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready：元素开始加载
window.onload :页面渲染完毕

//取出当前页面url中所携带的参数，name为需要取出的参数名称
function getQueryString(name) {
           var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
           var r = window.location.search.substr(1).match(reg);
           if (r != null) {
               return unescape(r[2]);
           }
           return null;
       }

得到当前元素的下一个元素的值，例如多选框的展示值和value
mui('body').on('tap','#commStrBtu_ok',function (){
        var r=document.getElementsByName("commIds");
        var commStr = "";
        for(var i=0;i<r.length;i++){    //遍历所有的多选框
            if(r[i].checked){           //检查是否被选中
                $(r[i]).attr("checked",true);     //若选中，则checked=true。attr/html自带元素、prop/自定义元素
                commStr += r[i].nextSibling.nodeValue+"|";   //得到当前元素的下一个元素的值
            }else {
                $(r[i]).attr("checked",false);
            }
        }
        if(commStr.replace(/(^s*)|(s*$)/g, "").length == 0){     //检查是否为空：commStr.replace(/(^s*)|(s*$)/g, "").length == 0
            document.getElementById("commStr").innerHTML="佣金类型不能为空";
        }else {
            document.getElementById("commStr").innerHTML=commStr;
        }
    });

   r[i].nextSibling.nodeValue：得到当前元素的下一个值，可用于选择框的值展示