layui中多个checkbox只能进行单选且一个被选中则取消其他的选中状态

在layui中,要实现多个checkbox只能进行单选,如果一个被选中,则取消其他的选中状态,可以通过以下步骤实现:

  1. 在HTML中,为每个checkbox元素添加相同的class属性,例如"my-checkbox"。
html 复制代码
<input type="checkbox" class="my-checkbox" value="1">
<input type="checkbox" class="my-checkbox" value="2">
<input type="checkbox" class="my-checkbox" value="3">
  1. 在JavaScript中,使用layui的form模块。通过调用.on()方法,绑定对应的触发事件。例如,可以使用"check"事件来实现单选功能。
javascript 复制代码
layui.use('form', function(){
  var form = layui.form;
  
  // 监听checkbox的选中状态
  form.on('checkbox(my-checkbox)', function(data){
    // 获取所有checkbox元素
    var checkboxes = form.elements['my-checkbox'];
    
    // 取消其他checkbox的选中状态
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i] !== data.elem) {
        form.checkStatus(checkboxes[i].name, false);
      }
    }
  });
});

通过以上步骤,当选中其中一个checkbox时,其他checkbox将会被取消选中,确保只有一个checkbox被选中。


@漏刻有时

相关推荐
mango_mangojuice1 小时前
Linux学习笔记(make/Makefile)1.23
java·linux·前端·笔记·学习
Days20502 小时前
简单处理接口返回400条数据本地数据分页加载
前端
Novlan12 小时前
@tdesign/uniapp 图标瘦身
前端
ManThink Technology2 小时前
如何使用EBHelper 简化EdgeBus的代码编写?
java·前端·网络
铅笔侠_小龙虾2 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
大模型玩家七七2 小时前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
. . . . .2 小时前
shadcn组件库
前端
2501_944711433 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜3 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
css趣多多3 小时前
ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑
前端