分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

js之checkbox判断常用示例

发布时间:2023-09-06 02:05责任编辑:白小东关键词:jscheckbox

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判断常用示例

原文地址:https://www.cnblogs.com/youcong/p/9356701.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved