使用toggle()实现表单变更UI更新时遇$未定义/on报错求助

首先，你遇到的两个错误根源很明确：

1. $ is not defined：浏览器根本不认识$这个符号，因为你没有在页面中引入jQuery库——$是jQuery的核心别名，没引入的话自然会报错。
2. on.() is not a function：这是连锁问题，因为$都没定义，后面调用$("input[name='option']").on(...)自然会提示方法不存在；另外如果DOM还没加载完成就执行代码，也可能触发类似错误。

除此之外，你的代码和HTML结构还有几个小问题需要修正，才能让筛选功能正常工作：

修正步骤 #

1. 先引入jQuery库 #

在你的HTML页面中，必须先引入jQuery才能使用它的语法。你可以下载jQuery文件到本地，或者直接使用官方CDN。比如在<body>标签的末尾（</body>之前）添加这段代码：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 修正JavaScript逻辑 #

原来的代码有两个逻辑问题：

• 初始化时把所有复选框的值都塞进了options数组，这会导致筛选功能失效——应该每次触发筛选时，动态获取当前选中的复选框值。
• 没有等待DOM加载完成就执行代码，可能导致找不到页面元素。

修正后的JS代码如下：

$(document).ready(function() {
    // 定义更新UI的函数
    function updateUI() {
        // 动态获取当前选中的复选框值
        var selectedOptions = [];
        $('.checkbox input:checked').each(function() {
            selectedOptions.push($(this).val());
        });

        // 遍历表格行，根据选中的党派显示/隐藏
        $("#senate-data tbody tr").each(function() {
            var rowParty = $(this).find(".Party").text().trim();
            // 如果选中数组为空，显示所有行；否则只显示匹配的行
            var shouldShow = selectedOptions.length === 0 || selectedOptions.includes(rowParty);
            $(this).toggle(shouldShow);
        });
    }

    // 给复选框绑定change事件
    $("input[name='option']").on("change", updateUI);

    // 页面加载完成后先执行一次，确保初始状态正确
    updateUI();
});

3. 修正HTML表格结构 #

你的HTML里，数据行（非表头的<tr>）放在了<tbody>标签外面，这不符合HTML表格的规范，会导致jQuery选择器$("#senate-data tbody tr")无法选中这些行。把所有数据行移到<tbody>内部：

<div class="checkbox">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="option" value="R">
    <label class="form-check-label" for="inlineCheckbox1">Republican</label>
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="option" value="D">
    <label class="form-check-label" for="inlineCheckbox2">Democrat</label>
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="option" value="I">
    <label class="form-check-label" for="inlineCheckbox3">Independent</label>
</div>
<div id="senate-data">
    <table>
        <tbody>
            <tr>
                <th>Name</th>
                <th>Party</th>
                <th>State</th>
                <th>Seniority</th>
                <th>Percentage of votes</th>
            </tr>
            <tr>
                <td>Alex</td>
                <td class="Party">D</td>
                <td>TN</td>
                <td>11</td>
                <td>80%</td>
            </tr>
            <tr>
                <td>Ammy</td>
                <td class="Party">R</td>
                <td>NY</td>
                <td>2</td>
                <td>30%</td>
            </tr>
            <tr>
                <td>Jammy</td>
                <td class="Party">R</td>
                <td>XX</td>
                <td>XX</td>
                <td>XX</td>
            </tr>
        </tbody>
    </table>
</div>

关键修改说明 #

• 引入jQuery：直接解决$ is not defined的核心问题；
• $(document).ready()包裹代码：确保页面DOM完全加载后再执行JS，避免找不到元素的情况；
• 动态获取选中的复选框值：原来的逻辑是一次性把所有选项加入数组，导致筛选永远是“全选”状态，现在每次触发筛选时重新获取选中值，逻辑才正确；
• 修正表格结构：符合HTML规范，保证jQuery选择器能正确定位到所有数据行；
• 初始执行updateUI()：页面加载完成后自动执行一次筛选，确保初始显示状态正确。

内容的提问来源于stack exchange，提问作者Tracy chan