1. 程式人生 > >js之checkbox判斷常用示例

js之checkbox判斷常用示例

layer 批量修改 st2 方式 標記 lag on() class 操作

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

js之checkbox判斷常用示例