• 技术文章 >web前端 >Layui教程

    layui如何获取复选框的值以及如何为复选框赋值

    VV2020-11-19 15:32:49转载97

    获取复选框的值:

    (学习视频分享:javascript视频教程

    一、layui获取单个复选框的值

    =========================================HTML=============================================
    <div class="layui-form-item">
       <div class="layui-col-md12">
             <div>
                   <label class="layui-form-label">类型</label>
                   <div class="layui-input-block">
                        <input type="checkbox" name="AllDay" id="AllDay" lay-filter="test1" value="全天" title="全天">
                        <input type="checkbox" name="IsEnd" id="IsEnd" lay-filter="test1" value="结束时间" title="结束时间">
                   </div>
             </div>
            <span></span>
       </div>
    </div>
    
    ========================================JS=============================================
    var allDayCheck = document.getElementById("AllDay").checked;
    var isEndCheck = document.getElementById("IsEnd").checked;

    二、layui获取多个复选框的值,并集中传给后台

    //HTML代码
    
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like" value="1" title="写作">
                <input type="checkbox" name="like" value="2" title="阅读" >
                <input type="checkbox" name="like" value="3" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    
     
    
    //JS代码
    
    <script>
        layui.use('form', function(){
            var form = layui.form;
            form.on('submit(formDemo)', function(data){
    
                //获取checkbox[name='like']的值
                var arr = new Array();
                $("input:checkbox[name='like']:checked").each(function(i){
                    arr[i] = $(this).val();
                });
                data.field.like = arr.join(",");//将数组合并成字符串
    
                $.post("admin.php", {data:data.field}, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                            location.href = res.url;
                        });
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                }, 'json');
    
                return false;
            });
        });
    </script>

    那么怎么给layui复选框赋值呢?

     layui.use('form', function () {
         form = layui.form;
         $('#AllDay').prop("checked", true); //先进行基本赋值                          
         form.render(); //这句必须(用来更新渲染页面)
    });

    推荐教程:layui

    以上就是layui如何获取复选框的值以及如何为复选框赋值的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:csdn,如有侵犯,请联系a@php.cn删除
    专题推荐:layui 复选框
    上一篇:layui表格分页不生效怎么办 下一篇:layui怎么实现三级联动
    第14期线上培训班

    相关文章推荐

    • Element表格嵌入复选框以及单选框的方法介绍(代码示例)• layui怎么设置复选框• PHP如何获取复选框的值• layui复选框使用介绍

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网