layui table checkbox设置单选监听/单选数量

liwei10822

于 2022-01-06 16:10:46 发布

阅读量1.3k

点赞数

文章标签： layui jquery javascript

本文链接：https://blog.youkuaiyun.com/liwei10822/article/details/122346578

版权

本文介绍了 layui 框架中实现单选功能的两种不同方法。第一种方法通过监听 checkbox 事件，动态控制选中状态，但无法获取行值；第二种方法更推荐，能有效获取选中项的数量。这两种方法对于前端开发人员在实际项目中处理表单单选逻辑时具有参考价值。

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

方式一（不推荐，不能获取单元格行值）：
layui.use(['form', 'table','miniPage','element'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table,
        miniPage = layui.miniPage;
    //var len=$(".education:checked").length;
    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');   //重新渲染
    });

var len=$(".education:checked").length;  获取单选数量

方式二（推荐）：