layui checkbox 复选框单选取消选择

最新推荐文章于 2023-09-04 00:00:00 发布

阿髙

最新推荐文章于 2023-09-04 00:00:00 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_43515759/article/details/104729778

本文介绍了一种将HTML中的复选框通过JavaScript转换为单选框的方法，实现了用户在一组选项中只能选择一项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="layui-form">
  <input type="checkbox" lay-skin="primary" name="dutyWatch" value="1" title="在岗" >
  <input type="checkbox" lay-skin="primary" name="dutyWatch" value="2" title="不在岗"  >
</div>

  // 复选框变单选框
  form.on('checkbox', function (data) {
    var oldState = data.elem.checked // 记录状态
    var elName = data.elem.name || '' // 取当前名称
    $("input[name='"+elName+"']").prop("checked", false);   //全部取消选中
    $(this).prop("checked", true);                          //勾选当前选中的选择框    
    if(!oldState){ // 如果是flase表示点击的是之前已被选中的那个
      $(this).prop("checked", false); // 取消勾选当前的
    } 
    form.render('checkbox');
  });