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


@漏刻有时

相关推荐
10share3 分钟前
我为什么用 React 重写了一个 VitePress
前端·react.js
计算机魔术师6 分钟前
GPT-6 Astra 发布后,Sebastian Raschka 解析 looped transformer 与隐藏推理链传闻
前端
不可能片场12 分钟前
Electron 退化成 node:一个环境变量的锅
前端·electron
楚楚河河14 分钟前
js 变量声明
前端
Cicada12821 分钟前
Web 服务器怎么选
运维·服务器·前端
不可能片场23 分钟前
接口返回 200 不代表活着:catch-all 路由的陷阱
前端·electron
farerboy28 分钟前
编程技巧:VUE 实现接口返回数据的流式处理
javascript·vue.js
用户9210802628628 分钟前
Cookie 和 Token,到底谁在负责登录态
前端
阳火锅30 分钟前
2025,记住这一年!它是古法编程的最后一年。
前端·javascript·面试
sibylyue31 分钟前
【报表和BI大屏】ECharts数据可视化大屏 / 驾驶舱
前端·信息可视化·echarts