zoukankan      html  css  js  c++  java
  • js之checkbox判断常用示例

    checkbox常用示例可参考:

    关于checkbox自动选中

    checkbox选中并通过ajax传数组到后台接收

    MP实战系列(十三)之批量修改操作(前后台异步交互)

    本次说的是,还是关于智能门锁开锁方式。通常情况下,开锁方式必须选择两种,或至少选择两种,否则就无法弹出对应的开锁方式列表以供勾选,这样一来。这就需要js层面的判断了,不可能全部推到服务器,这样用户少还好,用户多了,就不多说了。

    还是那句话,前端能搞定的,就不要后端,特别是JS判断等。前端主要负责的是获取接口,得到数据,渲染html。

    示例中,涉及到layui前端框架,关于layui前端框架,可参考我的这篇博文:layui弹出层之应用实例讲解

    js代码如下:

        
    
      function test(){
            var names = document.getElementsByName("lock_id");          
            var flag = false ;//标记判断是否选中一个               
            for(var i=0;i<names.length;i++){
                if(names[i].checked){
                    
                    layui.use('layer', function(){
                        var layer = layui.layer;
    
                        layer.open({
                            type: 1, 
                            area: ['400px', '400px'],
                            content: '<div align="center"> <label class="layui-form-label">初始开锁</label><div>人脸识别:<input type="checkbox" name="first_way" title="人脸识别" id="a1" onclick="this.value=(this.value==0)?1:0"> &nbsp;&nbsp;  密码:<input type="checkbox" name="first_way" title="密码" id="b2" onclick="this.value=(this.value==0)?1:0">&nbsp;&nbsp;  二维码: <input type="checkbox" name="first_way" title="二维码" id="a3" onclick="this.value=(this.value==0)?1:0">&nbsp;&nbsp;  远程: <input type="checkbox" name="first_way" title="远程" id="a4" onclick="this.value=(this.value==0)?1:0">&nbsp;&nbsp;   指纹: <input type="checkbox" name="first_way" title="指纹" id="a5" onclick="this.value=(this.value==0)?1:0"><br/> <label class="layui-form-label">后续开锁</label><div>人脸识别:<input type="checkbox" name="laster_way" title="人脸识别" id="b1" onclick="this.value=(this.value==0)?1:0"> &nbsp;&nbsp;  密码:<input type="checkbox" name="laster_way" id="b2" title="密码" onclick="this.value=(this.value==0)?1:0">&nbsp;&nbsp;  二维码: <input type="checkbox" name="laster_way" title="二维码" id="b3" onclick="this.value=(this.value==0)?1:0">&nbsp;&nbsp;  远程: <input type="checkbox" name="laster_way" title="远程" id="b4" onclick="this.value=(this.value==0)?1:0">&nbsp;&nbsp;   指纹: <input type="checkbox" name="laster_way" title="指纹" id="b5" onclick="this.value=(this.value==0)?1:0"><br/><p><input type="button" value="提交" onclick="test2()"/></p></div>' //这里content是一个普通的String
                          });
                      }); 
                    
                        flag = true ;
                        break ;
                 }
             }
             if(!flag){
                 layui.use('layer', function(){
                     var layer = layui.layer;
                     
                     layer.alert("至少选择一个门锁",{icon:5});
               });
                return false ;
             }
        
          
              
              
       } 
  • 相关阅读:
    urql 高度可自定义&&多功能的react graphql client
    使用vault pki 为nginx 生成tls 证书文件
    使用vault pki engine 方便的管理证书
    使用terraform 生成自签名证书
    Kapitan 通用terraform&& kubernetes 配置管理工具
    sqler 集成 terraform v0.12 生成资源部署文件
    检查cgroup v2 是否安装
    centos 较新版本kernel安装方法
    tbls ci 友好的数据库文档化工具
    graphql-query-rewriter 无缝处理graphql 变更
  • 原文地址:https://www.cnblogs.com/youcong/p/9356701.html
Copyright © 2011-2022 走看看