小程序在勾选一个选项时弹出是否勾选接下来的十个按钮,选择并勾选接下来的十个内容 的代码
时间: 2024-03-02 10:51:37 浏览: 13
以下是一个简单的示例代码,可以实现在勾选一个选项时弹出是否勾选接下来的十个按钮,选择并勾选接下来的十个内容。需要注意的是,这只是一个示例代码,具体实现方法还需要根据您的实际需求进行调整。
```html
<!-- WXML -->
<view class="option">
<checkbox value="{{optionChecked}}" bindchange="onOptionChange">勾选此选项</checkbox>
</view>
```
```javascript
// JS
Page({
data: {
optionChecked: false,
followingOptions: [], // 用于存储接下来的十个选项
showDialog: false // 是否显示弹出框
},
onOptionChange(e) {
const optionChecked = e.detail.value;
this.setData({ optionChecked });
if (optionChecked) {
this.setData({ showDialog: true });
}
},
onFollowingOptionChange(e) {
const checkedValues = e.detail.value;
const followingOptions = this.data.followingOptions.map(option => {
option.checked = checkedValues.includes(option.value);
return option;
});
this.setData({ followingOptions });
},
onDialogConfirm() {
this.setData({ showDialog: false });
},
onDialogCancel() {
this.setData({ optionChecked: false, showDialog: false });
},
onLoad() {
const followingOptions = [];
for (let i = 1; i <= 10; i++) {
followingOptions.push({
value: i,
name: `选项${i}`,
checked: false
});
}
this.setData({ followingOptions });
}
});
```
```html
<!-- 弹出框的 WXML -->
<view class="dialog" hidden="{{!showDialog}}">
<view class="dialog-mask" bindtap="onDialogCancel"></view>
<view class="dialog-content">
<view class="dialog-title">是否勾选接下来的十个按钮</view>
<checkbox-group bindchange="onFollowingOptionChange">
<block wx:for="{{followingOptions}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
</block>
</checkbox-group>
<view class="dialog-buttons">
<button class="button-confirm" bindtap="onDialogConfirm">确定</button>
<button class="button-cancel" bindtap="onDialogCancel">取消</button>
</view>
</view>
</view>
```
```css
/* 弹出框的样式 */
.dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.dialog-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.dialog-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
padding: 20px;
}
.dialog-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.dialog-buttons {
margin-top: 20px;
text-align: right;
}
.button-confirm {
background-color: #007aff;
color: #fff;
border-radius: 5px;
padding: 10px 20px;
margin-right: 10px;
}
.button-cancel {
background-color: #fff;
color: #007aff;
border-radius: 5px;
padding: 10px 20px;
}
```