zoukankan      html  css  js  c++  java
  • 关于checkbox自动选中

    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>
  • 相关阅读:
    python day6
    python day5
    python基础晋级篇
    python基础篇
    初识Python
    if语句
    A22. openstack架构实战-openstack的api
    A21. openstack架构实战-配置三层网络vxlan
    A20. openstack架构实战-虚拟机创建的流程
    A19. openstack架构实战-云主机的冷迁移
  • 原文地址:https://www.cnblogs.com/youcong/p/9255741.html
Copyright © 2011-2022 走看看