layui获取复选框的值

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>
--------------------- 
作者:奔跑_ 
来源:CSDN 
原文:https://blog.csdn.net/z45283943/article/details/81564475 
版权声明:本文为博主原创文章,转载请附上博文链接!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在layui中,可以使用form模块中的`form.val`方法获取表单元素的,其中包括复选框的选中状态。具体操作步骤如下: 1. 给复选框设置相同的名称(name),但是不同的(value),例如: ```html <input type="checkbox" name="hobby" value="reading" title="阅读"> <input type="checkbox" name="hobby" value="traveling" title="旅游"> <input type="checkbox" name="hobby" value="coding" title="编程"> ``` 2. 在JavaScript代码中使用`form.val`方法获取选中的,例如: ```javascript // 获取名为hobby的复选框的选中 var hobby = form.val('example', {checkbox: ['hobby']}); console.log(hobby.hobby); // 输出选中的,例如["reading", "coding"] ``` 其中,`'example'`表示表单的lay-filter属性,`'hobby'`表示复选框的name属性。`form.val`方法的第二个参数可以使用对象形式传递需要获取的表单元素的,其中,`checkbox`表示获取复选框为一个数组,包含需要获取复选框的name属性获取为一个对象,包含所有需要获取的表单元素的。 ### 回答2: 在layui中,可以使用以下方法来获取选中的复选框。 首先,需要给复选框设置一个相同的类名,比如"checkbox"。 然后,通过layui的form模块获取选中的复选框。首先需要引入layui的form模块,然后使用form.on()方法来监听复选框的选中事件。具体代码如下: layui.use(['form'], function() { var form = layui.form; form.on('checkbox(checkbox)', function(data) { var values = []; //用于存储选中的复选框 var checkboxs = $(".checkbox"); //获取所有复选框的jquery对象 //循环遍历复选框,判断是否选中,并将选中的存入values数组中 checkboxs.each(function() { if($(this).is(":checked")) { values.push($(this).val()); } }); console.log(values); //打印选中的 }); }); 以上代码中,通过checkbox(checkbox)来监听复选框的选中事件,然后通过each()方法来遍历所有的复选框,判断是否选中,如果选中则将存入values数组中。最后,通过console.log()来打印选中的。 希望对你有所帮助! ### 回答3: Layui 是一款基于HTML5和CSS3的模块化前端框架,用于构建响应式的Web界面。它提供了一系列的组件和工具,方便开发者进行快速的页面布局和交互效果设计。 在Layui中,要获取复选框Checkbox)选中的,可以通过jQuery的选择器来实现。首先,给复选框添加一个固定的class或者id,例如class="checkbox"。然后,使用Layui的模块化机制,引入jQuery库。 接下来,可以使用以下代码来获取选中的复选框: ```javascript layui.use('jquery', function(){ var $ = layui.jquery; //监听复选框的变化事件 $('#checkbox').on('change', function(){ var checkedValues = []; //遍历所有选中的复选框 $('input[name="checkbox"]:checked').each(function(){ checkedValues.push($(this).val()); }); //打印选中的 console.log(checkedValues); }); }); ``` 上述代码中,首先使用layui.use函数引入jquery模块。然后,通过监听复选框的change事件,在事件回调函数中,使用$('input[name="checkbox"]:checked')选择器来获取所有选中的复选框,并通过each方法遍历获取选中的。最后,可以将选中的存储在checkedValues数组中,并通过console.log函数打印出来。 总结起来,Layui获取复选框选中的的方法是:通过jQuery选择器找到选中的复选框元素,然后遍历获取选中的并进行相应的操作。以上就是关于如何使用Layui获取复选框选中的的回答。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值