已bootstrap为基础写一个单选题页面 选择错误样式变红并把正确答案的单选框样式变绿
时间: 2023-11-13 19:04:27 浏览: 149
以下是一个示例代码,使用了Bootstrap 4和jQuery库:
<!DOCTYPE html>
<html>
<head>
<title>单选题页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>请选择正确答案</h1>
<form>
<div class="form-group">
<label>问题1:以下哪个是一种果汁?</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" value="a">
<label class="form-check-label">牛奶</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" value="b">
<label class="form-check-label">橙汁</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q1" value="c">
<label class="form-check-label">可乐</label>
</div>
</div>
<div class="form-group">
<label>问题2:以下哪个是一种动物?</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" value="a">
<label class="form-check-label">苹果</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" value="b">
<label class="form-check-label">狗</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="q2" value="c">
<label class="form-check-label">桌子</label>
</div>
</div>
<button type="button" class="btn btn-primary" id="submitBtn">提交</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#submitBtn').click(function () {
var q1 = $('input[name=q1]:checked').val();
var q2 = $('input[name=q2]:checked').val();
if (q1 !== 'b') {
$('input[name=q1]').parent().addClass('text-danger');
$('input[name=q1][value=b]').parent().addClass('text-success');
}
if (q2 !== 'b') {
$('input[name=q2]').parent().addClass('text-danger');
$('input[name=q2][value=b]').parent().addClass('text-success');
}
});
});
</script>
</body>
</html>
在这个示例中,我们使用了Bootstrap的表单组件来创建单选题选项。当用户点击提交按钮时,使用jQuery获取选择的答案,并根据是否正确来添加样式类。
正确的单选框使用了text-success
类,错误的单选框使用了text-danger
类。你可以根据需要调整样式类和颜色。