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


@漏刻有时

相关推荐
啊啊啊~~3 分钟前
歌词滚动效果
javascript·html
球球和皮皮1 小时前
Babylon.js学习之路《四、Babylon.js 中的相机(Camera)与视角控制》
javascript·3d·前端框架·babylon.js
郭尘帅6662 小时前
vue3基础学习(上) [简单标签] (vscode)
前端·vue.js·学习
njsgcs2 小时前
opencascade.js stp vite webpack 调试笔记
开发语言·前端·javascript
T0uken3 小时前
【前端】:单 HTML 去除 Word 批注
前端·html·word
st紫月3 小时前
用vue和go实现登录加密
前端·vue.js·golang
岁岁岁平安3 小时前
Vue3学习(组合式API——计算属性computed详解)
前端·javascript·vue.js·学习·computed·计算属性
HWL56794 小时前
Express项目解决跨域问题
前端·后端·中间件·node.js·express
刺客-Andy4 小时前
React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例
前端·javascript·react.js
Go_going_4 小时前
【js基础笔记] - 包含es6 类的使用
前端·javascript·笔记