layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）

注意：

本例说明：
操作layui框架的复选框组件，从而实现控制（原生复选框）隐藏域的状态切换；

实现原生js对接老项目，+新框架layui的综合应用；

案例 · 应用场景 · 说明：

因为项目年久失修，部分逻辑代码无法重构，只能跟随老旧业务逻辑；【见上文注意】

为了使用新框架，并契合＜1%绝少部分的老旧代码，特此需要使用原生javascript或原生jquery语法，对无法重构的绝少部分代码进行修复性对接，从而达到项目版本更新（逻辑正常、功能完善、业务完备、视觉翻新）之目的。

案例 · 截图 · 示下

主要代码 · 示下：

<script type="text/javascript" src="{JS_PATH}jquery.min.js"></script>layui-form表单的复选框代码如下：<div class="layui-form-item"><div class="layui-input-block mgl0i w65i fl-l"><!--默认选中 check="" --><input type="checkbox" checked="" name="cookietime" value="2592000" id="cookietime" lay-skin="switch" lay-filter="switchcheckbox" lay-text="ON|OFF"></div><label class="layui-form-label w70i pdlr0 fl-l">记住用户名</label><label class="layui-form-label w70i fl-l"><a href="" class="">忘记密码</a></label></div><script src="{APP_PATH}statics/plugin/layui/layui.js"></script>
<script>layui.use(['form', 'laydate'], function(){var form = layui.form,layer = layui.layer;//监听指定开关form.on('switch(switchcheckbox)', function(data){// '温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis/*layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {offset: '6px'});*/// layer.msg(this.checked)if(this.checked){$('#cookietime').attr('checked', 'true');} else {$('#cookietime').removeAttr("checked");      }// layer.msg($('#cookietime').attr('checked'))});});
</script>

使用说明：

看需求：引入必要框架，jquery库、layui.js；
（需要弹框提示可使用 layer.js）
声明引入框架内需要使用的组件，如form表单、日历组件，等；
（语法参考上文代码，或layui官网）
绑定元素属性，请使用lay-filter="自定义钩子名称"；
（如：lay-filter="switchcheckbox"）
监听switch开关：form.on('switch(switchcheckbox)',function······等等等；
（代码参考上文代码）
状态获取与设置：（代码参考上文代码）

博主自留：

案例应用参考：会员项目 · member目录 · 登录页

更多checked状态操作：

参考博客：jQuery的checkbox状态获取与状态设置（赋值）

以上就是关于“layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）”的全部内容。

layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）相关推荐

8、Java Swing JCheckBox：复选框组件
一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框.Swing 中使用 JCheckBox 类实现复选框, JCheckBox类的常用构造方法如下. JCheckBox():创建一个默认的复 ...
layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...
java 复选框怎么用_Java Swing公开课|Java Swing的复选框组件怎么用，看完这篇文章你一定就会了...
[摘要]作为一门面向对象编程语言,Java吸收了C++语言的优点,也展现了其强大的一面,我们能在各个地方看到其功能强大和简单易用的两个特征,当然,也吸引了很多程序员的注意力,所以就有人想了解Java的 ...
Blazor确认复选框组件
目录介绍使用代码 Startup.cs App.razor _Host.cshtml ConfirmationCheckBox.razor ConfirmationCheckBox.razor.c ...
java中复选框组件_Java Swing JCheckBox：复选框组件
一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框.Swing中使用 JCheckBox 类实现复选框,该类的常用构造方法如下.JCheckBox():创建一个默认的复选框,在默认情况下既未 ...
layui复选框默认选中
layui复选框默认选中 table.render({elem: '#projectMaterialList', cols: [[ //标题栏{checkbox: true}, {type: 'num ...
ExtJs中checkboxgroup复选框组件的显示问题
checkboxgroup复选框组件容器,当时用属性 allowBlank:false 必须至少选择一项,否则给出提示 blankText ,出现如下问题: 如果一个没有选择的时候,给出提示,但 ...
java gui 单选_java GUI编程(swing)之三swing单选框复选框组件
swing复选框(JCheckBox) 单选框(JRadioButton) 特别说明:同一组单选按钮,必须先创建一个ButtonGroup,然后把单选按钮放到ButtonGroup 中 package ...
layui复选框,设置部分可选
话不多说直接上代码关键代码是,table的done回调和table.on复选框监听 layui.use(['table', 'util'], function () {var table = lay ...

layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）

文章目录

layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）

注意：

案例 · 应用场景 · 说明：

案例 · 截图 · 示下

主要代码 · 示下：

使用说明：

博主自留：

layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）相关推荐

最新文章

热门文章