使用 JavaScript 切换 Radio Button 改变表格样式-html教程-PHP中文网

使用 JavaScript 切换 Radio Button 改变表格样式

心靈之曲

发布： 2025-10-15 12:32:16

原创

297人浏览过

使用 javascript 切换 radio button 改变表格样式

本文介绍了如何使用 JavaScript 根据选中的 Radio Button 动态改变表格的显示样式。核心在于通过监听 Radio Button 的 `onchange` 事件，修改表格的 `display` 属性，从而实现表格的显示与隐藏。同时，需要注意 HTML 元素 ID 的正确使用，确保 JavaScript 代码能够准确操作目标元素。

实现原理

通过监听 HTML 中 Radio Button 的 onchange 事件，当用户切换 Radio Button 的选择时，触发相应的 JavaScript 函数。该函数根据选中的 Radio Button 的 value 值，控制不同表格的 display 属性，从而达到切换表格样式的目的。

具体实现

以下是一个完整的示例，展示如何通过 Radio Button 的切换，控制两个表格的显示与隐藏。

HTML 结构

首先，我们需要定义 Radio Button 和表格的 HTML 结构。

立即学习“Java免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

<fieldset id="uberpruefung">
    <legend style="font-weight: bold">Prüfung im Rahmen einer</legend>

    <div>
        <label for="stoerungbeh">Störungsbehebung</label>
        <input type="radio" id="stoerungbeh" name="pruefung" value="stoerungsbehebung" onchange="changeStylePruefung(this)" checked>
    </div>

    <div>
        <label for="hauptpruefung">Hauptprüfung</label>
        <input type="radio" id="hauptpruefung" name="pruefung" value="hauptpruefung" onchange="changeStylePruefung(this)">
    </div>
</fieldset>

<br><br>

<fieldset>
    <legend style="font-weight: bold">In Ordnung</legend>

    <div id='table-haupt' style="display: none">
        <table class='rg-table' summary='Hed'>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </table>
    </div>

    <div id='table-stoerung' style="display: block">
        <table class='rg-table-stoerung' summary='Hed'>
            <tr>
                <th>Header A</th>
                <th>Header B</th>
            </tr>
            <tr>
                <td>Data A</td>
                <td>Data B</td>
            </tr>
        </table>
    </div>
</fieldset>

登录后复制

注意：

每个 Radio Button 都有一个唯一的 id 和相同的 name 属性，name 属性用于将它们组合成一个单选按钮组。
onchange 事件绑定了 changeStylePruefung 函数，并在事件触发时将当前 Radio Button 对象传递给该函数。
表格被包裹在 div 元素中，并赋予了唯一的 id，例如 table-haupt 和 table-stoerung。初始状态下，table-stoerung 显示，table-haupt 隐藏。
这里将class属性修改为id属性。

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现表格样式的切换。

function changeStylePruefung(radiobutton) {
    if (radiobutton.value === "stoerungsbehebung") {
        document.getElementById("table-stoerung").style.display = "block";
        document.getElementById("table-haupt").style.display = "none";
    } else {
        document.getElementById("table-stoerung").style.display = "none";
        document.getElementById("table-haupt").style.display = "block";
    }
}

登录后复制

代码解释：

changeStylePruefung 函数接收一个 Radio Button 对象作为参数。
根据 Radio Button 的 value 值判断当前选中的是哪个选项。
使用 document.getElementById 方法获取表格对应的 div 元素。
修改 div 元素的 style.display 属性，控制表格的显示与隐藏。block 表示显示，none 表示隐藏。

总结与注意事项

ID 的重要性： 确保 HTML 元素具有唯一的 id 属性，并且 JavaScript 代码中使用 document.getElementById 方法正确获取这些元素。错误的ID会导致JavaScript无法找到对应的HTML元素，从而导致代码无法正常工作。
display 属性： display 属性是控制 HTML 元素显示与隐藏的关键。display: block 使元素显示为块级元素，display: none 使元素隐藏。
代码可维护性： 在实际项目中，可以将表格的显示与隐藏逻辑封装成单独的函数，提高代码的可读性和可维护性。
CSS 样式： 可以使用 CSS 类来定义表格的样式，并在 JavaScript 中通过修改元素的 className 属性来切换样式，而不是直接修改 style 属性。这可以使代码更加简洁，也更易于维护。

通过以上步骤，我们可以轻松地使用 JavaScript 根据 Radio Button 的选择动态改变表格的显示样式。这种方法可以应用于各种场景，例如根据用户选择显示不同的数据表格，或者根据用户角色显示不同的权限设置界面。

以上就是使用 JavaScript 切换 Radio Button 改变表格样式的详细内容，更多请关注php中文网其它相关文章！