首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >layui的checkbox/redio选择处理和修改初始化问题

layui的checkbox/redio选择处理和修改初始化问题

作者头像
友儿
发布2022-09-11 12:58:23
发布2022-09-11 12:58:23
1K0
举报
文章被收录于专栏:友儿友儿

以下为部分重要代码

代码语言:javascript
复制
//多选
<div class="layui-form-item">
 <label class="layui-form-label">
     <span class="x-red">*</span>配套设施</label>
 <div>
     <input type="checkbox" class="fang_config_data" name="fang_config[]" value="22">
     <div class="layui-unselect layui-form-checkbox layui-form-checked"><i class="layui-icon layui-icon-ok"></i>
     </div>
     热水器
     <input type="checkbox" class="fang_config_data" name="fang_config[]" value="23">
     <div class="layui-unselect layui-form-checkbox layui-form-checked"><i class="layui-icon layui-icon-ok"></i>
     </div>
     双人床
     <input type="checkbox" class="fang_config_data" name="fang_config[]" value="24">
     <div class="layui-unselect layui-form-checkbox layui-form-checked"><i class="layui-icon layui-icon-ok"></i>
     </div>
     冰箱
 </div>
</div>
//单选
<div class="layui-form-item">
 <label class="layui-form-label"><span class="x-red">*</span>状态</label>
 <div class="layui-input-block">
     <input type="radio" name="fang_status" value="1" lay-skin="primary" title="是">
     <input type="radio" name="fang_status" value="0" lay-skin="primary" title="否">
 </div>
</div>

监听选中

代码语言:javascript
复制
<script>
 layui.use(['form'], function(){
     var  form = layui.form;
     // 监听全选
     form.on('checkbox(checkall)', function(data){
         if(data.elem.checked){
             $('tbody input').prop('checked',true);
         }else{
             $('tbody input').prop('checked',false);
         }
         form.render('checkbox');
     });
     function init()
     {
         //多选初始化选中
         var checkboxJson = "22,23,24".split(',');//此处为从后台获取
         var obj = $('.fang_config_data');
         obj.map(function (index,value) {
             var v = $(value).val();
             if ($.inArray(v, checkboxJson) != -1) {
                 $(value).next('div').addClass('layui-form-checked');
             }
         });
         //单选初始化选中
         var fang_status = "1";//此处为从后台获取,这里默认存储为1
         var bass_obj = $("input[name=fang_status][value='" + fang_status + "']").next('div');
         bass_obj.addClass('layui-form-radioed');
         bass_obj.children('i').addClass('layui-anim-scaleSpring');
         bass_obj.children('i').text('');
         form.render('select');
     }
     init();
 });
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档