checkbox常用示例可参考:
本次说的是，还是关于智能门锁开锁方式。通常情况下，开锁方式必须选择两种，或至少选择两种,否则就无法弹出对应的开锁方式列表以供勾选，这样一来。这就需要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 ;
}
}
原文地址：https://www.cnblogs.com/youcong/p/9356701.html
时间： 2024-10-15 17:04:30