layui做一个功能,要求触发后弹出复选框,选择后返回选中值
时间: 2023-12-11 16:02:50 浏览: 241
好的,可以使用layui的弹出层和复选框组件来实现这个功能。以下是示例代码:
HTML:
```html
<button class="layui-btn" id="btn">点击选择</button>
```
JavaScript:
```javascript
layui.use(['layer', 'form'], function(){
var layer = layui.layer;
var form = layui.form;
// 点击按钮弹出层
$('#btn').click(function(){
layer.open({
title: '请选择',
content: '<form class="layui-form"><div class="layui-form-item"><div class="layui-input-block"><input type="checkbox" name="options[]" title="选项1"><input type="checkbox" name="options[]" title="选项2"><input type="checkbox" name="options[]" title="选项3"></div></div></form>',
btn: ['确定', '取消'],
yes: function(index, layero){
// 获取选中的值
var checkedValues = [];
$('input[name="options[]"]:checked').each(function(){
checkedValues.push($(this).attr('title'));
});
// 返回选中的值
console.log(checkedValues);
layer.close(index);
},
btn2: function(index, layero){
// 取消按钮的回调函数
layer.close(index);
},
success: function(layero, index){
// 渲染表单
form.render();
}
});
});
});
```
解释一下代码:
1. 引入layer和form模块。
2. 点击按钮后弹出层,层的标题为“请选择”,内容为一个包含多个复选框的表单。
3. 确定按钮点击后,获取选中的复选框的值,并将其打印到控制台。同时关闭层。
4. 取消按钮点击后,关闭层。
5. 在弹出层成功渲染后,调用form.render()方法进行渲染,使得表单组件能够正常工作。
希望这个示例能够帮助到你。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)