如何通过单选按钮实现数组过滤？是否有更简便的实现方案？

1. 单选按钮过滤数组的最佳实现方式 #

其实核心思路很清晰，就是获取单选按钮的选中值，然后用数组的filter()方法对数据源进行筛选，这是最简洁高效的方式，不管用原生JS还是jQuery都适用。

具体步骤大概是：

• 监听单选按钮的状态变化（更推荐用change事件，比click更友好，支持键盘切换选中的场景）
• 获取当前选中的单选按钮的值
• 用filter()遍历数据源数组，留下符合选中值条件的项
• 把过滤后的结果渲染到页面上

2. 当然可以用表单单选按钮设置过滤条件触发过滤 #

这是非常常见的交互场景，完全可行，而且实现起来并不复杂。

你的代码优化建议 #

看了你贴的代码片段，确实有可以简化和修正的地方：

• 首先$("#resultstest").clone("<tbody></tbody>")写法有问题，clone()方法的参数是布尔值（是否复制事件），不是HTML字符串，应该直接操作表格的tbody元素
• cashe拼写错误，应该是cache
• 可以缓存DOM元素，避免重复查找，提升性能
• 把过滤逻辑抽成单独的函数，代码结构更清晰

给你一个优化后的jQuery版本示例：

$(document).ready(function () {
    // 缓存DOM元素，避免重复查询
    const $resultTable = $("#resultstest");
    const $radios = $("input[name=college-age]:radio");
    let contactsData = []; // 存储从接口获取的原始数据

    // 初始化：获取数据
    $.ajax({
        type: "GET",
        url: "js/contacts.json",
        dataType: "json",
        cache: false, // 修正拼写错误
        success: function (data) {
            contactsData = data;
            // 初始渲染全部数据
            renderTable(contactsData);
            
            // 绑定单选按钮的change事件
            $radios.on("change", function () {
                const selectedValue = $(this).val();
                // 过滤数据（这里假设你的数据里有对应college-age的字段，比如item.ageGroup）
                const filteredData = contactsData.filter(item => item.ageGroup === selectedValue);
                // 渲染过滤后的结果
                renderTable(filteredData);
            });
        }
    });

    // 抽离渲染表格的函数，复用性更强
    function renderTable(data) {
        // 清空表格tbody
        $resultTable.find("tbody").empty();
        // 遍历数据生成表格行
        data.forEach(item => {
            const row = `<tr>
                <td>${item.name}</td>
                <td>${item.ageGroup}</td>
                <!-- 其他字段根据你的数据结构补充 -->
            </tr>`;
            $resultTable.find("tbody").append(row);
        });
    }
});

这样调整后，代码结构更清晰，逻辑更简洁——核心就是数据存储+监听单选变化+过滤+渲染这几个步骤，没必要搞复杂的克隆操作。

内容的提问来源于stack exchange，提问作者W Lopez