领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

web前端基础教程 用layui获取checkbox复选框值

nixiaole 2024-11-19 08:24:35 知识剖析 27 ℃


layui更多是面向于后端开发者，所以在组织形式上依然采用了几年前的以浏览器为宿主的类AMD模块管理方式，却又并非受限于CommonJS的那些条条框框，它拥有自己的模式，更加轻量和简单。

获取layui表单复选框已选中的数据:

　　html

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>layui.form.checkbox获取选中</title>

　　<linkrel="stylesheet"href="layui/css/layui.css"media="all">

　　</head>

　　<body>

　　<formclass="layui-form"><!--提示：如果你不想用form，你可以换成div等任何一个普通元素-->

　　<divclass="layui-form-item">

　　<labelclass="layui-form-label">复选框</label>

　　<divclass="layui-input-block">

　　<inputtype="checkbox"name="CSDN"lay-filter="like"title="复选框一"value="dongsir">

　　<inputtype="checkbox"name="CSDN"lay-filter="like"title="复选框二"value="董先生">

　　</div>

　　</div>

　　<divclass="layui-form-item">

　　<labelclass="layui-form-label">开关关</label>

　　<divclass="layui-input-block">

　　<inputtype="checkbox"name="switch"lay-skin="switch"value="董辉">

　　</div>

　　</div>

　　<divclass="layui-form-item">

　　<labelclass="layui-form-label">开关开</label>

　　<divclass="layui-input-block">

　　<inputtype="checkbox"name="switch"checkedlay-skin="switch"value="董先生的CSDN">

　　</div>

　　</div>

　　<divclass="layui-form-item">

　　<divclass="layui-input-block">

　　<buttonclass="layui-btn"lay-submitlay-filter="*">立即提交</button>

　　</div>

　　</div>

　　</form>

　　<scriptsrc="layui/layui.js"></script>

　　JS

　　layui.use('form',function(){

　　varform=layui.form,

　　$=layui.$;

　　//各种基于事件的操作。

　　form.on('submit(*)',function(data){

　　//将页面全部复选框选中的值拼接到一个数组中

　　vararr_box=[];

　　$('input[type=checkbox]:checked').each(function(){

　　arr_box.push($(this).val());

　　});

　　//数组

　　console.log(arr_box);

　　//["董先生的CSDN"]

　　returnfalse;//阻止表单跳转。如果需要表单跳转，去掉这段即可。

　　});

　　});

　　如果需要字符串的话，再将数组转为字符串

　　console.log(arr_box.toString());

　　//dongsir,董先生,董先生的CSDN

　　如果需要自定义分割字符的字符串

　　console.log(arr_box.join(","));

　　//dongsir,董先生,董先生的CSDN

?layui，是一款采用自身模块规范编写的前端UI框架，遵循原生Html/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。

以上就是酷仔今日整理发布的“web前端基础教程 用layui获取checkbox复选框值”一文，希望为正在学习Web前端layui的朋友提供参考.

Tags：

猜你喜欢

最近发表
标签列表