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 ;
         }
    
      
          
          
   }