关于checkbox自动选中

最新推荐文章于 2023-07-30 08:10:28 发布

weixin_34210740

最新推荐文章于 2023-07-30 08:10:28 发布

阅读量676

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：https://yq.aliyun.com/articles/645180

本文介绍了一种根据预设值自动选中checkbox的方法，并通过示例代码详细展示了如何使用JavaScript实现这一功能。同时，文章还涉及了如何通过URL参数初始化checkbox状态、利用Ajax与后端交互获取数据并解析返回值等技术细节。

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

checkbox是比较常用的，无论是权限管理还是博客的文章的标签类型的勾选，或者是上下级部门及其公司，都会用的到的。

今天主要讲的是checkbox自动根据值选中。

可参考我之前的文章：checkbox选中并通过ajax传数组到后台接收

js代码:

 //截取URL参数
    function GetRequest() {
          var fullURL = window.location.href;
     
           var url = location.search; //获取url中"?"符后的字串
           var theRequest = new Object();
     
           if (url.indexOf("?") != -1) {
              var str = url.substr(1);
              strs = str.split("&");
          
              for(var i = 0; i < strs.length; i ++) {
                 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                 
                 $("#lockNo").val(theRequest[strs[i].split("=")[0]]);
                 getLockInfo(theRequest[strs[i].split("=")[0]]);
              }
           }
           return theRequest;
        }
    
    
    
  //判断当input中checkbox的值等于1时，自动选中
    function checkedFul()
    {
          //获取数组
          var inputs = document.getElementsByName("first_way");
          
          //数组遍历
          for(var i=0;i<inputs.length;i++){
             var val = inputs[i].value;
            
             if(val==1){
                 inputs[i].checked=true;
             }else{
                 inputs[i].checked=false;
             }
          }  
    }
    
    
     function getLockInfo(lockNo){
        
        $.ajax({
            url:"/verifyLockNo",
            type:"POST",
            data : {"lockNo":lockNo},
            dataType : 'json',
            success:function(data){
            
            var json = eval("("+data+")");
            
            if(json.returnCode=="200"){
                var first = json.lockEntity.firstOpenWay;
        
                $("#a1").val(first.substring(0,1));
                $("#a2").val(first.substring(1,2));
                $("#a3").val(first.substring(2,3));
                $("#a4").val(first.substring(3,4));
                
                //调用方法
                checkedFul();
                
                
            }else if(json.returnCode=="500"){
                
            }else{
                alert("有问题，请联系管理员");
            }
                
            },error:function(){
                alert("失败");
            }
        });

服务端代码:

　　　　 @PostMapping(value = "/verifyLockNo")
        public String verifyLockNo(String lockNo) {
        
        logger.info("lockNo:" + lockNo);

        EntityWrapper<LockEntity> wrapper = new EntityWrapper<LockEntity>();


        wrapper.eq("lock_no", lockNo);

        LockEntity lockEntity = lockService.selectOne(wrapper);

        Map<String, Object> map = new HashMap<String, Object>();
        logger.info("lockEntity:" + lockEntity);
        if (lockEntity != null) {
            map.put("lockEntity", lockEntity);
            map.put("returnCode", "200");
            map.put("returnMsg", "ok");
        } else {
            map.put("returnCode", "500");
            map.put("returnMsg", "error");
        }

        return JSON.toJSONString(map);

html代码:

  <div>
        
      A:<input type="checkbox" name="first_way" title="A" id="a1" onclick="this.value=(this.value==0)?1:0"> 
  &nbsp;&nbsp;  
    B:<input type="checkbox" name="first_way" title="B"  id="a2" onclick="this.value=(this.value==0)?1:0">
  &nbsp;&nbsp;  
     C: <input type="checkbox" name="first_way" title="C" id="a3" onclick="this.value=(this.value==0)?1:0">
  &nbsp;&nbsp;  
     D: <input type="checkbox" name="first_way" title="D" id="a4" onclick="this.value=(this.value==0)?1:0">
    </div>