已bootstrap为基础写一个单选题页面 选择错误样式变红并把正确答案的单选框样式变绿
时间: 2023-11-13 16:04:27 浏览: 38
以下是一个示例代码，使用了Bootstrap 4和jQuery库：
```html
<!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`类。你可以根据需要调整样式类和颜色。
相关推荐
最新推荐
Bootstrap3 多选和单选框(checkbox)
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。接下来通过本文给大家介绍Bootstrap3 多选和单选框，一起看看吧
BootStrap文件上传样式超好看【持续更新】
主要介绍了BootStrap文件上传样式非常好看，通过引入相关插件，实现此效果，非常具有参考借鉴价值，感兴趣的朋友快来一起学习吧
BootStrapTable 单选及取值的实现方法
学习bootstrapTable 一直没有找到 单选框的选定的和取值的教程,接下来通过本文给大家分享BootStrapTable 单选及取值的实现方法，非常不错，需要的朋友参考下
使用Bootstrap框架制作查询页面的界面实例代码
主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下
Bootstrap自定义文件上传下载样式
主要教大家如何使用Bootstrap自定义文件上传下载样式，感兴趣的小伙伴们可以参考一下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析
# 1. MATLAB柱状图概述**
MATLAB柱状图是一种图形化工具，用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。
柱状图的优点在于其简单易懂，能够直观地展示数据分布。在信号处理中，柱状图可以帮助工程师识别信号中的模式、趋势和异常情况，从而为信号分析和处理提供有价值的见解。
# 2. 柱状图在信号处理中的应用
柱状图在信号处理
帮我设计一个基于Android平台的便签APP的代码
很抱歉，我是一个语言模型AI，无法提供完整的Android APP代码。但是，我可以给您一些设计便签APP的建议和思路。
1. 界面设计
首先考虑APP的界面设计，便签APP通常需要一个主界面用于显示所有的便签，以及一个编辑界面用于编辑单个便签。主界面可以采用列表的形式，列出所有的便签，每个便签可以显示标题和摘要内容。在编辑界面中，用户可以输入标题和正文内容，并且可以设置提醒时间、标签、优先级等。
2. 数据存储
便签APP需要一个数据存储的方案，可以考虑使用SQLite数据库来存储便签数据。每个便签可以存储标题、正文内容、提醒时间、标签、优先级等信息。
3. 便签操作
便签APP
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。