js之checkbox判斷常用示例
阿新 • • 發佈:2018-07-23
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"> 密碼:<input type="checkbox" name="first_way" title="密碼" id="b2" onclick="this.value=(this.value==0)?1:0"> 二維碼: <input type="checkbox" name="first_way" title="二維碼" id="a3" onclick="this.value=(this.value==0)?1:0"> 遠程: <input type="checkbox" name="first_way" title="遠程" id="a4" onclick="this.value=(this.value==0)?1:0"> 指紋: <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"> 密碼:<input type="checkbox" name="laster_way" id="b2" title="密碼" onclick="this.value=(this.value==0)?1:0"> 二維碼: <input type="checkbox" name="laster_way" title="二維碼" id="b3" onclick="this.value=(this.value==0)?1:0"> 遠程: <input type="checkbox" name="laster_way" title="遠程" id="b4" onclick="this.value=(this.value==0)?1:0"> 指紋: <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判斷常用示例