Toggle divs basierend auf Kontrollkästchen Werte regex

Question

Ich versuche divs auf Checkbox Wert zu wechseln basierend von regex

Ich habe eindeutige ID als data-row-id und die Verwendung dieser Wert Ich versuche divs zu verstecken und zeigen

hier ist meine regex

new RegExp("^" + $("input[type='checkbox'].filter-industry:checked").map(function() { 
    return $(this).data("rowId"); 
}).get().join("|") + "$"); 

dann mache ich das

$("div.industry-ri-box").each(function() { 
    var $this = $(this); 
    $this[rowIds.source !== "0" 
    && rowIds.test($this.data("rowId")) ? "fadeIn" : "fadeOut"](); }); 

es scheint s Arbeit vervollkommnet, aber für einige Kombination verhext. Ich weiß, etwas stimmt nicht mit der Regex, aber ich konnte es nicht herausfinden

ich habe so weit durch Befolgen einer Stackoverflow-Antwort leider konnte ich es nicht als Referenz finden Entschuldigung dafür.

hier ist die sample codepen für die diese

Answer 1

Die Bilanzierung der regexp bricht, weil seine id 1. So ist, wenn ein überall in der ID ist, zum Beispiel 18 wird angezeigt.

Ändern Sie die var ROWIDs Reihe dazu, so wird jede Zahl von Zeile Beginn/Ende-Zeichen (^ und $) umgeben ist:

var rowIds = new RegExp("^" + $("input[type='checkbox'].filter-industry:checked").map(function() { return $(this).data("rowId"); }).get().join("$|^") + "$"); 

Versuchen Sie, Klammern

Answer 2

um den Inhalt Ihrer regex, so statt wobei schließlich zB: ^5|1|18$ es ^(5|1|18)$

Hier ist die entsprechende Zeile sein sollte:

für Ihre insbeson

new RegExp("^(" + $("input[type='checkbox'].filter-industry:checked").map(function() { 
    return $(this).data("rowId"); 
}).get().join("|") + ")$"); 

Answer 3

würde ich nicht verwenden regex Large Anwendungsfall.

Etwas Ähnliches - Trennung der Darstellung-und-Versteck der Kisten aus dem Verhalten Checkbox - fühlt sich schöner:

$(function() { 
    var $industryCheckboxes = $("input[type='checkbox'].filter-industry"); 
    function updateBoxVisibility() { 
    var checkedIds = $industryCheckboxes.filter(":checked") 
      .map(function() { 
       return $(this).data("rowId"); 
      }) 
      .get(); 
    $("div.industry-ri-box").each(function() { 
     var $box = $(this); 
     var shouldShow = (checkedIds.includes(0) || checkedIds.includes($box.data("rowId"))); 
     $box[shouldShow ? 'fadeIn' : 'fadeOut'](); 
    }); 
    } 
    $industryCheckboxes.on("change", function(e) { 
    var $checkbox = $(this); 
    if(this.checked) { 
     if($checkbox.data("rowId") == "0") { 
     $industryCheckboxes.slice(1).prop("checked", false); 
     } else { 
     $industryCheckboxes.first().prop("checked", false); 
     } 
    } 
    updateBoxVisibility(); 
    }); 
});