如何实现Radio Button与Checkbox过滤器的协同工作？

我已实现单选过滤器与文本过滤器配合，通过变量dom存储显示的页面元素，现在需要添加复选框过滤器实现多条件筛选。我尝试使用dom.find('.naz').show()但未生效，最终dom变量需仅包含屏幕上实际可见的元素。

HTML代码 #

<input id="sito" class="find" name="txt" placeholder="CLIENTE" type="text" size=15 >
<input id="IP" class="find" name="txt" placeholder="INDIRIZZO IP" type="text" size=15>
<input id='all' class="filter" type="radio" value="All" checked name="test"><label>All</label>
<input id='prod' class="filter" type="radio" value="PROD" name="test"><label>PROD</label>
<input id='test' class="filter" type="radio" value="TEST" name="test"><label>TEST</label>
<input id="check-naz" type="checkbox" class="filter check" value="NAZ" name="test"><label>NAZIONALI</label>
<input id="check-est" type="checkbox" class="filter check" value="EST" name="test"><label>ESTERI</label>
<div id="elenco">
    <div class="cliente naz"  value="PROD">
        cliente
        <div class="desc" >
                scommettendo prod <br>
        </div>
        <div class="funzioni">
            <span>
             <span>INDIRIZZI IP</span>
            </span>
            <button type="button" onclick="managerScomP(clienti.get('scommettendo').get('scommettendo prod').get('manager'))" id="m1">manager</button>
            <button type="button" onclick="reloadmemScommP(clienti.get('scommettendo').get('scommettendo prod').get('reload'), 'resultScommP')" id="r1">reload</button>
            <br>
            <ul>
                <li class="version"><button type="button" onclick="UpVersioneT(clienti.get('scommettendo').get('scommettendo prod').get('versione')+'/upgradeVersion','upVersionScommP')" class="rs1">UpVersione</button><div class="resultVersion" id="upVersionScommP">Risultato</div></li>
                <li><button type="button" onclick="rilascio(clienti.get('scommettendo').get('scommettendo prod').get('versione')+'/upgradeVersion?isRelease=1 ','rilascio-scommettendo-P')" class="rs1 rilascio">Rilascio</button><div class="resultVersion" id="rilascio-scommettendo-P">Risultato</div></li>
                <li><button type="button" onclick="reloadmem(clienti.get('scommettendo').get('scommettendo prod').get('reload')[0]+'/XPayments/reload','resultScommP0')" class="rs1">10.38.0.21</button><div class="result" id="resultScommP0">Risultato</div></li>
                <li><button type="button" onclick="reloadmem(clienti.get('scommettendo').get('scommettendo prod').get('reload')[1]+'/XPayments/reload','resultScommP1')" class="rs1"></button><div class="result"  id="resultScommP1">Risultato</div></li>
                <li><button type="button" onclick="reloadmem(clienti.get('scommettendo').get('scommettendo prod').get('reload')[2]+'/XPayments/reload','resultScommP2')" class="rs1"></button><div class="result" id="resultScommP2">Risultato</div></li>
            </ul>
        </div>
    </div>
    <div class="cliente estero" value="PROD">
        cliente
        <div class="desc">
            betafrik prod <br>
        </div>
        <div class="funzioni">
             <span>INDIRIZZI IP</span>
            <button type="button" onclick="managerScomP(clienti.get('betafrik').get('betafrik prod').get('manager'))" id="m1">manager</button>
            <button type="button" onclick="reloadmemScommP(clienti.get('betafrik').get('betafrik prod').get('reload'),'resultBetafrikP')" id="r1">reload</button>
            <br>
            <ul>
                <li class="version"><button type="button" onclick="UpVersioneT(clienti.get('betafrik').get('betafrik prod').get('versione') + '/upgradeVersion','UpVersioneBetafrikP')" class="rs1">UpVersione</button><div class="resultVersion" id="UpVersioneBetafrikP">Risultato</div></li>
                <li><button type="button" onclick="rilascio(clienti.get('betafrik').get('betafrik prod').get('versione')+'/upgradeVersion?isRelease=1 ','rilascio-betafrik-P')" class="rs1 rilascio">Rilascio</button><div class="resultVersion" id="rilascio-betafrik-P">Risultato</div></li>
                <li><button type="button" onclick="reloadmem(clienti.get('betafrik').get('betafrik prod').get('reload')[0] +'/XPayments/reload','resultBetafrikP0')" class="rs1"></button><div class="result" id="resultBetafrikP0">Risultato</div></li>
                <li><button type="button" onclick="reloadmem(clienti.get('betafrik').get('betafrik prod').get('reload')[1] +'/XPayments/reload','resultBetafrikP1')" class="rs1"></button><div class="result" id="resultBetafrikP1">Risultato</div></li>
            </ul>
        </div>
    </div>
</div>

原JS代码 #

$(function() {
    var dom = $('#elenco .cliente'); 
    $('input[name="test"]').on('change', function(a, b) {
    value1 = this.value;
    console.log(value1)
    $('#elenco .cliente').hide();
    if (value1 == 'All') {
        $('#elenco .cliente').show();
        dom = $('#elenco .cliente');
        $('#sito').val('') 
        $('#IP').val('') 
    }
    if (value1 == 'PROD') {
        $('#elenco .cliente[value="PROD"]').show();
        dom = $('#elenco .cliente[value="PROD"]'); 
    }
    if (value1 == 'TEST') {
        $('#elenco .cliente[value="TEST"]').show();
        dom = $('#elenco .cliente[value="TEST"]'); 
    }
    if ($('#check-naz').is(':checked')){
        $('.naz').show();
        dom = $('.naz'); 
    }
    if ($('#check-est').is(':checked')){
        $('.estero').show();
        dom = $('.estero');
    }
    });
});

解决方案 #

核心思路 #

放弃单独处理每个过滤器后覆盖dom的方式，改为每次筛选都计算所有条件的交集：先基于单选条件获取基础元素集合，再叠加复选框条件进一步筛选，最后更新dom为可见元素。同时统一绑定所有过滤器的事件，确保任意条件变化都触发完整筛选流程。

修改后的JS代码 #

$(function() {
    let dom = $('#elenco .cliente'); 

    // 绑定所有过滤器的change事件
    $('.filter').on('change', function() {
        // 获取当前所有筛选条件
        const selectedRadio = $('input[name="test"]:radio:checked').val();
        const isNazChecked = $('#check-naz').is(':checked');
        const isEstChecked = $('#check-est').is(':checked');

        // 先隐藏所有元素
        $('#elenco .cliente').hide();

        // 第一步：根据单选条件筛选
        let filtered = $('#elenco .cliente');
        if (selectedRadio !== 'All') {
            filtered = filtered.filter(`[value="${selectedRadio}"]`);
        }

        // 第二步：叠加复选框条件筛选
        if (isNazChecked || isEstChecked) {
            let regionFilters = [];
            if (isNazChecked) regionFilters.push('.naz');
            if (isEstChecked) regionFilters.push('.estero');
            filtered = filtered.filter(regionFilters.join(','));
        }

        // 显示筛选结果，更新dom为可见元素
        filtered.show();
        dom = filtered;

        // 保留单选选All时清空文本框的逻辑
        if (selectedRadio === 'All') {
            $('#sito').val('');
            $('#IP').val('');
        }
    });

    // 文本过滤器联动逻辑（基于当前dom集合筛选）
    $('.find').on('input', function() {
        const sitoVal = $('#sito').val().toLowerCase();
        const ipVal = $('#IP').val().toLowerCase();

        // 在当前dom集合中筛选符合文本条件的元素
        dom.hide().filter(function() {
            const text = $(this).text().toLowerCase();
            return text.includes(sitoVal) && text.includes(ipVal);
        }).show();

        // 更新dom为当前可见元素
        dom = $('#elenco .cliente:visible');
    });
});

关键改进 #

• 统一事件绑定：所有过滤器（单选、复选框）触发时都执行完整筛选，避免条件冲突
• 逐步筛选：先处理单选，再叠加复选框，保证多条件协同生效
• 文本过滤器基于当前dom筛选，保持所有过滤器联动
• dom变量始终指向当前可见元素，符合需求

内容的提问来源于stack exchange，提问作者Lorenzo Donadio