layui--checkbox 全選問題

1、在layui前端框架下 做checkbox的全選,Jq做的沒有效果。

2、前端部分(記得引入相關的js):

<input type="checkbox" name="all-id" lay-skin="primary" lay-filter="selectAll">
<input type="checkbox" name="id" value="{$data['id']}" lay-skin="primary" lay-filter="selectOne">
<input type="checkbox" name="id" value="{$data['id']}" lay-skin="primary" lay-filter="selectOne">
<input type="checkbox" name="id" value="{$data['id']}" lay-skin="primary" lay-filter="selectOne">

3、js部分:

layui.use(['form'], function() {
    form = layui.form;
    var form = layui.form;
    //全選情況下
    form.on('checkbox(selectAll)', function (data) {
        var a = data.elem.checked;
        if (a == true) {
            $("input[name='id']").prop("checked", true);
            form.render('checkbox');
        } else {
            $("input[name='id']").prop("checked", false);
            form.render('checkbox');
        }

    });
    //單選情況下
    form.on('checkbox(selectOne)',function(data){
        var f_count = 0; //單個非選擇計數
        $("input[name='id']").each(function(i,el){
             //如果有一個未選中 全選checkbox修改爲未選中
            if( el.checked == false){

                $("input[name='all-id']").prop("checked",false);
                form.render('checkbox');
                f_count++;
            }
        });

        //如果全部選中 全選checkbox修改爲選中
        if (f_count == 0) {
            console.log(222);
            $("input[name='all-id']").prop("checked",true);
            form.render('checkbox');.0
        }
        console.log(f_count);
    });
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章