js

做个开心的码农 · 发表于 2024-11-13 18:59:29

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

作业4：
1. 将存储在js对象中的数据以复选框形式显示在页面中，添加“全选”、“反选”、“提交”按钮，点击提交按钮，在页面中显示所选中的复选框的值（id）。
var colleges =[{id:1,name:"文学院"},{id:2,name:"外国语学院"},{id:3,name:"马克思学院"},{id:4,name:"美术学院"},{id:5,name:"管理学院"},{id:6,name:"音乐学院"}];
效果如下图所示：

已知部分代码如下：

2. 设计一个按钮“获取学生信息”，点击该按钮，将存储在数组中的学生信息显示在页面上：
var students =[{id:1101, studentNo:'024301712101',studentName:'艾小燕',sex:0,photo:'photo/024321712101.jpg'},
{id:1102, studentNo:'024301712102',studentName:'包大壮',sex:1,photo:'photo/024321712102.jpg'},
{id:1103, studentNo:'024301712103',studentName:'岑中均',sex:1,photo:'photo/024321712103.jpg'},
{id:1104, studentNo:'024301712104',studentName:'邓呈和',sex:1,photo:'photo/024321712104.jpg'},
{id:1105, studentNo:'024301712105',studentName:'冯至强',sex:1,photo:'photo/024321712105.jpg'},
{id:1106, studentNo:'024301712106',studentName:'宫平基',sex:1,photo:'photo/024321712106.jpg'},];

效果如下：
点击按钮前：

点击按钮后：

已知部分代码如下：

FishC · 发表于 2024-11-13 19:02:41

为了实现你的作业要求，我们可以分别为两个任务编写JavaScript代码。

### 任务1：复选框显示与提交

首先，我们需要将`colleges`对象中的数据以复选框形式显示在页面中，并实现“全选”、“反选”、“提交”功能。

假设`colleges`对象如下：

var colleges = {
1: "College A",
2: "College B",
3: "College C"
};

复制代码

HTML和JavaScript代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colleges</title>
</head>
<body>
<div id="checkboxes"></div>
<button id="selectAll">全选</button>
<button id="deselectAll">反选</button>
<button id="submit">提交</button>
<div id="selectedValues"></div>
<script>
var colleges = {
1: "College A",
2: "College B",
3: "College C"
};
var checkboxesDiv = document.getElementById('checkboxes');
for (var id in colleges) {
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = id;
checkbox.value = colleges[id];
var label = document.createElement('label');
label.htmlFor = id;
label.appendChild(document.createTextNode(colleges[id]));
checkboxesDiv.appendChild(checkbox);
checkboxesDiv.appendChild(label);
checkboxesDiv.appendChild(document.createElement('br'));
}
document.getElementById('selectAll').onclick = function() {
var checkboxes = checkboxesDiv.getElementsByTagName('input');
for (var checkbox of checkboxes) {
checkbox.checked = true;
}
};
document.getElementById('deselectAll').onclick = function() {
var checkboxes = checkboxesDiv.getElementsByTagName('input');
for (var checkbox of checkboxes) {
checkbox.checked = !checkbox.checked;
}
};
document.getElementById('submit').onclick = function() {
var selectedValues = [];
var checkboxes = checkboxesDiv.getElementsByTagName('input');
for (var checkbox of checkboxes) {
if (checkbox.checked) {
selectedValues.push(checkbox.id);
}
}
document.getElementById('selectedValues').innerText = 'Selected IDs: ' + selectedValues.join(', ');
};
</script>
</body>
</html>

复制代码

### 任务2：获取学生信息

假设`students`数组如下：

var students = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" }
];

复制代码

HTML和JavaScript代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Students</title>
</head>
<body>
<button id="getStudents">获取学生信息</button>
<div id="studentInfo"></div>
<script>
var students = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" }
];
document.getElementById('getStudents').onclick = function() {
var studentInfoDiv = document.getElementById('studentInfo');
studentInfoDiv.innerHTML = ''; // 清空之前的内容
for (var student of students) {
var studentDiv = document.createElement('div');
studentDiv.innerText = 'ID: ' + student.id + ', Name: ' + student.name;
studentInfoDiv.appendChild(studentDiv);
}
};
</script>
</body>
</html>

复制代码

这两段代码分别实现了你所描述的功能。希望这能帮助你完成作业！如果有任何问题，请随时问我。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册

js

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块