用html+JS代码写一个添加问题页面,页面分为左右两个盒子,在页面左侧盒子可以选择题型,能够实现添加单选题,多选题和问答题功能。页面右侧盒子有标题输入框、问卷说明输入框以及一个空白区域,使用左侧添加题型功能

时间: 2023-06-17 16:06:36 浏览: 110

js页面中添加 ---左右添加多选框

在JavaScript页面开发中，"左右添加多选框"通常指的是创建一种交互式用户界面，其中包含可以被用户选中或取消选中的复选框，并且这些复选框以某种方式排列，例如从左到右或者分列显示。这种布局常见于需要用户进行多项选择的场景，如设置选项、过滤条件等。下面我们将详细讨论如何实现这样的功能。我们需要理解HTML的基本结构。在HTML中，多选框（checkbox）通过`<input>`标签来创建，类型设置为`checkbox`： ```html <input type="checkbox" id="option1" name="options" value="Option1"> <label for="option1">选项一</label> ``` 这里的`id`属性用于与`<label>`标签配合，使得点击标签时也能触发复选框的状态改变。`name`属性则用于在提交表单时将这些复选框的值作为一个组发送。`value`属性定义了复选框的值。接下来，我们可以用CSS来控制这些复选框的布局。例如，如果想要它们从左到右排列，可以使用`display: inline-block`或者浮动（`float: left`）： ```css input[type="checkbox"] { display: inline-block; margin-right: 10px; /* 添加间距 */ } /* 或者使用浮动布局 */ input[type="checkbox"] { float: left; margin-right: 10px; } ``` 在JavaScript中，我们可能需要监听复选框的`change`事件，以便在用户操作后更新状态或者执行其他逻辑： ```javascript document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { checkbox.addEventListener('change', function() { console.log(`选项 "${this.value}" 的状态已更改`); // 在这里处理状态变更的逻辑，如更新存储、触发其他操作等 }); }); ``` 如果需要实现更复杂的交互，比如分列显示，可以使用HTML的`<fieldset>`和`<legend>`元素来创建一个分组，并用CSS调整样式： ```html <fieldset> <legend>选项组1</legend> <input type="checkbox" id="option1" name="options" value="Option1"> <label for="option1">选项一</label>  </fieldset> <fieldset> <legend>选项组2</legend> <input type="checkbox" id="option2" name="options" value="Option2"> <label for="option2">选项二</label>  </fieldset> ``` 然后用CSS设置`fieldsets`的宽度和浮动，使其并排显示： ```css fieldset { width: 50%; float: left; } ``` 为了适应不同的屏幕尺寸，可以使用响应式设计，如Bootstrap的栅格系统，或者自定义媒体查询（media queries）来调整多选框的布局： ```css @media (max-width: 768px) { fieldset { width: 100%; float: none; } } ``` 以上就是使用JavaScript创建"左右添加多选框"的基本步骤和原理，包括HTML结构、CSS布局以及JavaScript事件监听。根据实际需求，你可以进一步定制样式和交互，以实现更丰富的功能。

可以参考以下代码实现： ```html <!DOCTYPE html> <html> <head> <title>添加问题页面</title> <script> // 定义题目类型枚举 var QuestionType = { SINGLE_CHOICE: "单选题", MULTIPLE_CHOICE: "多选题", SHORT_ANSWER: "问答题" }; // 定义题目对象 function Question(type, content, options) { this.type = type; this.content = content; this.options = options; } // 初始化题目数组 var questions = []; // 添加单选题 function addSingleChoice() { var content = prompt("请输入题目内容："); if (content) { var optionCount = parseInt(prompt("请输入选项数量：")); if (optionCount) { var options = []; for (var i = 0; i < optionCount; i++) { options.push(prompt("请输入选项" + (i + 1) + "：")); } var question = new Question(QuestionType.SINGLE_CHOICE, content, options); questions.push(question); renderQuestions(); } } } // 添加多选题 function addMultipleChoice() { var content = prompt("请输入题目内容："); if (content) { var optionCount = parseInt(prompt("请输入选项数量：")); if (optionCount) { var options = []; for (var i = 0; i < optionCount; i++) { options.push(prompt("请输入选项" + (i + 1) + "：")); } var question = new Question(QuestionType.MULTIPLE_CHOICE, content, options); questions.push(question); renderQuestions(); } } } // 添加问答题 function addShortAnswer() { var content = prompt("请输入题目内容："); if (content) { var question = new Question(QuestionType.SHORT_ANSWER, content, null); questions.push(question); renderQuestions(); } } // 渲染题目列表 function renderQuestions() { var questionList = document.getElementById("questionList"); questionList.innerHTML = ""; for (var i = 0; i < questions.length; i++) { var question = questions[i]; var questionItem = document.createElement("div"); questionItem.className = "questionItem"; questionItem.innerHTML = "<span>" + question.type + "</span><span>" + question.content + "</span>"; questionList.appendChild(questionItem); } } </script> <style> .container { display: flex; flex-direction: row; height: 100vh; } .leftBox { flex: 1; padding: 20px; background-color: #f0f0f0; } .rightBox { flex: 3; padding: 20px; background-color: #fff; } .questionType { margin-bottom: 20px; } .questionItem { margin-bottom: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 5px; } </style> </head> <body> <div class="container"> <div class="leftBox"> <div class="questionType"> <button onclick="addSingleChoice()">添加单选题</button> </div> <div class="questionType"> <button onclick="addMultipleChoice()">添加多选题</button> </div> <div class="questionType"> <button onclick="addShortAnswer()">添加问答题</button> </div> </div> <div class="rightBox"> <div> <label>标题：</label> <input type="text"> </div> <div> <label>问卷说明：</label> <textarea></textarea> </div> <div id="questionList"></div> </div> </div> </body> </html> ``` 在页面左侧盒子中，分别添加了添加单选题、添加多选题和添加问答题的按钮。在点击按钮后，会弹出输入框，用户可以输入题目内容和选项，然后会将题目对象添加到题目数组中，并调用 `renderQuestions()` 函数重新渲染页面右侧盒子中的题目列表。题目列表使用一个 `<div>` 元素来实现，每个题目使用一个 `<div>` 元素来表示，其中包含题目类型和题目内容两个 `<span>` 元素。

阅读全文

用html+JS代码写一个添加问题页面,页面分为左右两个盒子,在页面左侧盒子可以选择题型,能够实现添加单选题,多选题和问答题功能。页面右侧盒子有标题输入框、问卷说明输入框以及一个空白区域,使用左侧添加题型功能

相关推荐

web页面 html+js

用python写一个定时提醒程序的实现代码

基于springboot+vue+MySQL实现的在线考试系统+源代码+文档

基于springboot+vue实现的在线考试系统+源代码+文档

基于VB+SQL实现的上机考试系统设计(论文+源代码)

html+js 实现考核系统

vue页面写学生在线考试系统的添加题库页面

用html+JS代码写一个添加问题页面,页面分为左右两个盒子,在页面左侧盒子可以选择题型,能够实现添加单选题,多选题和问答题功能。页面右侧盒子有标题输入框、问卷说明输入框以及一个空白区域,使用左侧添加题型功

重庆对外经贸学院在四川2020-2024各专业最低录取分数及位次表.pdf

湖北大学在四川2020-2024各专业最低录取分数及位次表.pdf

西安培华学院在四川2020-2024各专业最低录取分数及位次表.pdf

yolo算法-自动驾驶道路交通锥数据集-110张图像带标签-蓝黄色automatic-v62ff.zip

欧姆龙plc55个程序,三层提升机，冲床，自动模切机，啤机，灌装机，双翻分拣机，铬化机，螺纹钢生产线，超声波清洗机等等

长安大学在四川2020-2024各专业最低录取分数及位次表.pdf

Java项目: 基于springBoot+mysql+maven+vue公交线路查询系统(含源码+数据库+毕业论文)

fileChoose的完整demo，java弹出文件选择和下载框.zip

架构设计面试题,非常版

一个可以运行在 vercel 上的 go 语言框架，基于 g.zip

最新推荐

android studio实现简单考试应用程序实例代码详解

数据库系统概论题目带答案的，大家可以看看，有选择，填空，简答，综合等几种题型

SSM动力电池数据管理系统源码及数据库详解

管理建模和仿真的文件

MapReduce分区机制揭秘：作业效率提升的关键所在

在电子商务平台上，如何通过CRM系统优化客户信息管理和行为分析？请结合DELL的CRM策略给出建议。

R语言桑基图绘制与SCI图输入文件代码分析

"互动学习：行动中的多样性与论文攻读经历"

如何优化MapReduce分区过程：掌握性能提升的终极策略

对于Java初学者来说，如何从源代码层面深入理解Java编程基础和项目实践的核心概念？