使用 J*aScript 切换 Radio Button 改变表格样式_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 J*aScript 切换 Radio Button 改变表格样式

2025-10-15

浏览次数：次

返回列表

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

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

实现原理

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

具体实现

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

HTML 结构

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

<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>

注意：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

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

J*aScript 代码

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

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