微信小程序写一个可编辑的调查问卷代码
时间: 2023-12-01 10:09:30 浏览: 87
以下是一个基于微信小程序框架的可编辑调查问卷的示例代码:
```html
<view class="container">
<view class="question" wx:for="{{questions}}" wx:key="index">
<view class="label">{{item.label}}</view>
<view wx:if="{{item.type === 'text'}}">
<input type="text" bindinput="onInput" data-index="{{index}}" value="{{item.answer}}" />
</view>
<view wx:else-if="{{item.type === 'radio'}}">
<view class="option" wx:for="{{item.options}}" wx:key="index">
<input type="radio" bindchange="onRadioChange" data-index="{{index}}" name="{{item.label}}" value="{{item.value}}" checked="{{item.answer === item.value}}" />{{item.label}}
</view>
</view>
<view wx:else-if="{{item.type === 'checkbox'}}">
<view class="option" wx:for="{{item.options}}" wx:key="index">
<input type="checkbox" bindchange="onCheckboxChange" data-index="{{index}}" value="{{item.value}}" checked="{{item.answer.indexOf(item.value) !== -1}}" />{{item.label}}
</view>
</view>
</view>
<view class="button-group">
<button type="primary" bindtap="addQuestion">添加问题</button>
<button type="primary" bindtap="submitAnswers">提交</button>
</view>
</view>
```
这个示例中,我们创建了一个`questions`数组来存储所有的问题,每个问题包括问题名称、问题类型(文本、单选、多选)、选项(如果是单选或多选类型)和答案。我们使用`wx:for`指令来循环显示所有的问题,并根据问题类型显示不同的输入框。我们还添加了两个按钮来添加新问题和提交答案。当点击“提交”按钮时,我们将所有的答案存储在一个新的数组中,并在控制台中输出。
以下是示例代码的JavaScript部分:
```javascript
Page({
data: {
questions: [
{ label: "你的姓名", type: "text", answer: "" },
{ label: "你的性别", type: "radio", options: [{ label: "男", value: "male" }, { label: "女", value: "female" }], answer: "" },
{ label: "你的爱好", type: "checkbox", options: [{ label: "篮球", value: "basketball" }, { label: "足球", value: "football" }, { label: "游泳", value: "swimming" }, { label: "跑步", value: "running" }], answer: [] }
]
},
addQuestion() {
this.data.questions.push({ label: "", type: "text", answer: "" });
this.setData({
questions: this.data.questions
});
},
onInput(event) {
const index = event.currentTarget.dataset.index;
this.data.questions[index].answer = event.detail.value;
},
onRadioChange(event) {
const index = event.currentTarget.dataset.index;
this.data.questions[index].answer = event.detail.value;
},
onCheckboxChange(event) {
const index = event.currentTarget.dataset.index;
const value = event.detail.value;
const answer = this.data.questions[index].answer;
const indexInAnswer = answer.indexOf(value);
if (indexInAnswer === -1) {
answer.push(value);
} else {
answer.splice(indexInAnswer, 1);
}
this.setData({
questions: this.data.questions
});
},
submitAnswers() {
const answers = this.data.questions.map(question => {
return {
label: question.label,
answer: question.answer
}
});
console.log(answers);
}
});
```
在JavaScript代码中,我们为添加问题、文本框输入、单选框选择和多选框选择分别定义了处理函数。在添加问题函数中,我们向`questions`数组中添加一个新问题并更新数据。在文本框输入、单选框选择和多选框选择处理函数中,我们获取问题的索引,更新问题的答案,并更新数据。在提交答案函数中,我们将所有的答案存储在一个新的数组中,并在控制台中输出。
这只是一个简单的示例代码,你可以根据自己的需求进行更改和扩展。
阅读全文