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被选中。


@漏刻有时

相关推荐
张元清1 分钟前
React 鼠标追踪与交互效果实战
前端·javascript·面试
MinterFusion1 分钟前
HTML DOM元素的定位问题
前端·css·html
落魄江湖行14 分钟前
入门篇六 Nuxt4错误处理:给应用装个安全气囊
前端·typescript·nuxt4
薛定猫AI18 分钟前
【技术干货】用 design.md 驯服 AI 生成前端:从 Awesome Design 到工程化落地实践
前端·人工智能
kyriewen21 分钟前
你的JS代码总在半夜崩溃?TypeScript来“上保险”了
前端·javascript·typescript
iReachers39 分钟前
HTML打包EXE配置管理教程:多项目打包设置一键保存、加载与切换
java·前端·javascript
武藤一雄43 分钟前
WPF中ViewModel之间的5种通讯方式
开发语言·前端·microsoft·c#·wpf
霍理迪1 小时前
Vue路由——route
前端
whuhewei1 小时前
js事件循环
前端·javascript
TheRouter1 小时前
构建一个支持多模型的 AI 聊天应用:React + TheRouter API 全栈教程
前端·人工智能·react.js