js

做个开心的码农 · 发表于前天 18:59

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

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

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 · 发表于前天 19:02

为了实现你的作业要求，我们可以分别为两个任务编写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 小助理，如未能正确解答您的问题，请继续追问。

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