用JQuery出一道多选题
时间: 2024-02-12 10:09:22 浏览: 30
以下是一个简单的多选题示例,使用了JQuery来处理选项选择和提交答案的功能:
HTML代码:
```
<div id="question">
<p>以下哪些水果是红色的?</p>
<input type="checkbox" name="answer" value="apple">苹果<br>
<input type="checkbox" name="answer" value="banana">香蕉<br>
<input type="checkbox" name="answer" value="cherry">樱桃<br>
<input type="checkbox" name="answer" value="orange">橙子<br>
<button id="submit">提交</button>
</div>
<div id="result"></div>
```
JQuery代码:
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function() {
var answers = $('input[name="answer"]:checked');
if (answers.length < 1) {
$('#result').text('请选择至少一个答案!');
} else {
var selected = [];
answers.each(function() {
selected.push($(this).val());
});
if ($.inArray('apple', selected) !== -1 && $.inArray('cherry', selected) !== -1) {
$('#result').text('回答正确!');
} else {
$('#result').text('回答错误!');
}
}
});
});
</script>
```
以上代码实现了一个简单的多选题,当用户点击提交按钮时,JQuery会获取用户选择的答案,并根据正确答案进行比较,最终在页面上显示回答是否正确。