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


@漏刻有时

相关推荐
LQE几秒前
Vue 2 vs Vue 3:全面对比指南
前端
叫回忆几秒前
elpis的动态组件拓展
javascript
用户350144817923 分钟前
数据对比中的”平等性原则“
前端
yuki_uix3 分钟前
从扁平到层级:树形数据转换的工程化实践与设计哲学
前端·javascript
米丘4 分钟前
vue-router 5.x 关于 RouterLink 实现原理
前端·javascript·vue.js
前端嘣擦擦5 分钟前
mac 安装 nvm + node + npm(国内镜像 + 官方安装步骤)
前端·macos·npm
小码哥_常8 分钟前
Jetpack Compose 1.8 新特性来袭,打造丝滑开发体验
前端
哎哟喂_19 分钟前
Webpack 的按需引入的原理
前端
whisper9 分钟前
前端安全护航者:三分钟带你了解 jsencrypt
前端·javascript