Add a selector with checkboxes to https://docs.astral.sh/ruff/rules/

script.js

// Create checkbox to hide preview rules
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = true;
checkbox.addEventListener("change", function () {
    for (var span of document.querySelectorAll(
        'span[title="Rule is in preview"]',
    )) {
        span.closest("tr").style.display = event.currentTarget.checked
            ? null
            : "none";
    }
    updateTextareaContent();
});
var label = document.createElement("label");
label.textContent = " Show preview rules";
label.prepend(checkbox);
document.querySelector("h2").before(label);

// Update state: textarea -> checkboxes
function onTextareaChange(event) {
    var codes = new Set(textarea.value.match(/\w+/g));
    for (var table of document.querySelectorAll("article table")) {
        var category = getCurrentCategory(table);
        if (codes.has(category)) {
            for (var input of table.querySelectorAll("input")) {
                input.checked = true;
            }
        } else {
            table.querySelector("th input").checked = false;
            for (var input of table.querySelectorAll("td input")) {
                input.checked = codes.has(getCurrentCode(input));
            }
        }
    }
    setTimeout(updateTextareaContent, 1);
}

// From the current checkbox, find its code
function getCurrentCode(el) {
    return el.closest("label").textContent.trim();
}

// From the current table, find its category based on the heading
function getCurrentCategory(el) {
    el = el.closest("article>*");
    while (el && el.tagName != "H3" && el.tagName != "H2") {
        el = el.previousElementSibling;
    }
    return el.textContent.match(/\((\w+)\)\s*#?$/)[1];
}

// Create rule-editing textarea
var textarea = document.createElement("textarea");
textarea.setAttribute(
    "placeholder",
    "Paste your existing `select` config for rules\n(comma-separated TOML strings)",
);
textarea.setAttribute("cols", 50);
textarea.setAttribute("rows", 5);
textarea.style.position = "absolute";
textarea.style.right = "0";
textarea.addEventListener("change", onTextareaChange);
document.querySelector("header").appendChild(textarea);

// Update state: heading checkbox -> all checkboxes -> textarea
function onCheckboxChange(event) {
    var cell = event.currentTarget.parentElement.parentElement;
    var table = cell.closest("table");
    if (cell.tagName === "TH") {
        for (var input of table.querySelectorAll("td input")) {
            input.checked = event.currentTarget.checked;
        }
    } else {
        if (!event.currentTarget.checked) {
            table.querySelector("th input").checked = false;
        }
    }
    updateTextareaContent();
}

// Create rule checkboxes
for (var tr of document.querySelectorAll("tr")) {
    var td = tr.firstElementChild;
    var label = document.createElement("label");
    label.textContent = " " + td.textContent;
    label.style.whiteSpace = "nowrap";
    var input = document.createElement("input");
    input.type = "checkbox";
    input.addEventListener("change", onCheckboxChange);
    label.prepend(input);
    td.innerHTML = "";
    td.appendChild(label);
}

// Calculate all enabled codes and update textarea content
function updateTextareaContent() {
    var codesEnabled = [[]]; // First row is for whole categories.
    for (var table of document.querySelectorAll("article table")) {
        if (table.querySelector("th input").checked) {
            codesEnabled[0].push(getCurrentCategory(table));
        } else {
            var addedCodes = [];
            for (var input of table.querySelectorAll(
                'tr:not([style*="display: none"]) td input',
            )) {
                if (input.checked) {
                    addedCodes.push(getCurrentCode(input));
                }
            }
            codesEnabled.push(addedCodes);
        }
    }
    textarea.value = codesEnabled
        .filter((row) => row.length > 0)
        .map((row) =>
            row
                .map((c) => `"${c}", `)
                .join("")
                .trim(),
        )
        .join("\n");
}