使用javascript過濾多個複選框

Question

我在玩耍並嘗試創建一個funzies網站，該網站將根據您檢查的成分列出食譜。例如，如果我有一個食譜，需要牛肉，蘋果和羽衣甘藍，我不希望它顯示在結果中，直到所有3種成分都被檢查過。

目前我的腳本將返回至少包含一個選中成分的所有結果。

下面是HTML

    <h4>Meat</h4> 
        <label> 
         <input type="checkbox" name="meat" rel="bacon" id="bacon" /> Bacon 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="beef" id="beef" /> Beef 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="chicken" id="chicken" /> Chicken 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="dove" id="dove" /> Dove 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="ham" id="ham" /> Ham 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="pork" id="pork" /> Pork 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="quail" id="quail" /> Quail 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="salmon" id="salmon" /> Salmon 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="sausage" id="sausage" /> Sausage 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="scallops" id="scallops" /> Scallops 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="shrimp" id="shrimp" /> Shrimp 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="tilapia" id="tilapia" /> Tilapia 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="trout" id="trout" /> Trout 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="tuna" id="tuna" /> Tuna 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="turkey" id="turkey" /> Turkey 
        </label> 

        <!-- checkboxes for vegetable type --> 
       <h4>Vegetables</h4> 
        <label> 
         <input type="checkbox" name="vegetables" rel="arugula" id="arugula" /> Arugula 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="broccolini" id="broccolini" /> Broccolini 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="cabbage" id="cabbage" /> Cabbage 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="celery" id="celery" /> Celery 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="collardGreens" id="collardGreens" /> Collard Greens 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="dill" id="dill" /> Dill 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="kale" id="kale" /> Kale 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="lettuce" id="lettuce" /> Lettuce 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="peas" id="peas" /> Peas 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="spinach" id="spinach" /> Spinach 
        </label> 

       <!-- checkboxes for fruit type --> 
       <h4>Fruit</h4> 
        <label> 
         <input type="checkbox" name="fruit" rel="apple" id="apple" /> Apple 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="avocado" id="avocado" /> Avocado 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="banana" id="banana" /> Banana 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="blackberry" id="blackberry" /> Blackberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="blueberry" id="blueberry" /> Blueberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="cherry" id="cherry" /> Cherry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="coconut" id="coconut" /> Coconut 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="cranberry" id="cranberry" /> Cranberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="grape" id="grape" /> Grape 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="raisin" id="raisin" /> Raisin 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="grapefruit" id="grapefruit" /> Grapefruit 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="lemon" id="lemon" /> Lemon 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="lime" id="lime" /> Lime 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="mango" id="mango" /> Mango 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="cantaloupe" id="cantaloupe" /> Cantaloupe 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="honeydew" id="honeydew" /> Honeydew 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="watermelon" id="watermelon" /> Watermelon 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="nectarine" id="nectarine" /> Nectarine 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="olive" id="olive" /> Olive 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="orange" id="orange" /> Orange 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="papaya" id="papaya" /> Papaya 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="peach" id="peach" /> Peach 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="pear" id="pear" /> Pear 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="plum" id="plum" /> Plum 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="prune" id="prune" /> Prune 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="pineapple" id="pineapple" /> Pineapple 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="pomegranate" id="pomegranate" /> Pomegranate 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="raspberry" id="raspberry" /> Raspberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="strawberry" id="strawberry" /> Strawberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="tomato" id="tomato" /> Tomato 
        </label> 

      </div> 
     </div> 

     <div class="col-sm-8"> 

      <ul class="results"> 
       <li class="dinner bacon kale apple">Steak and Salad</li> 
       <li class="dinner">Result 2</li> 
       <li class="apple">Result 3</li> 
       <li class="arts video-games">Result 4</li> 
      </ul> 

     </div> 

和這裏的相關部分當前腳本我使用：

$(document).ready(function() { 
     $('.results > li').hide(); 

     $('div.tags').find('input:checkbox').live('click', function() { 
      $('.results > li').hide(); 
      $('div.tags').find('input:checked').each(function() { 
       $('.results > li.' + $(this).attr('rel')).show(); 
      }); 
     }); 
    }); 

我希望有人能指出我在正確的方向，並幫助我出。

Answer 1

我的答案是使用事件和事件監聽器。

將一個EventListener添加到一個將在'onClick'事件中更新的包裝div元素：因爲事件'向上冒泡'DOM，如果在該包裝div（一種成分，爲了您的目的）中單擊任何嵌套的輸入元素， onClick事件將'冒泡'，然後由包含div的EventListener處理。巧妙的是事件將包含關於其源的信息（稱爲目標的屬性：https://developer.mozilla.org/en-US/docs/Web/API/Event/target），這是DOM元素生成的事件）...我們稍後將使用這個事實。

除了事件之外，還有一個對象具有您的成分名稱和真/假值（指示用戶是否選擇了該成分）的屬性。然後，使用Event的目標（您已設置爲配料名稱）的id作爲該對象的索引。

然後，您可以使用該對象來查看哪些配方可以與給定配方一起使用（一種方法是讓每個配方有一組配料，就像我一樣）。

代碼：

//just here for visualization purposes 
var results = document.getElementById('results'); 
var canMakeDish = document.getElementById('canMakeDish'); 

var options = document.getElementById('options'); 

//object that keeps track of what the user has selected so far 
var selected = { 
    bacon: false, 
    beef: false, 
    chicken: false, 
    dove: false, 
    ham: false, 
    // and so on and so forth... 
}; 


//an example recipe's requirements 
var dishRequirements = ['bacon', 'beef', 'peas', 'mango']; 

options.addEventListener('click', (event) => { 
    //prevent the Event from travelling up the DOM 
    event.stopPropagation(); 
    //update our selected object with whatever the status of the clicked element was 
    selected[event.target.id] = event.target.checked; 
    //simply adds the id of the input element to the results for visualization of what is being affected 
    results.innerHTML = 'You just modified ' + event.target.id; 
    //Do your updating of results here 
    var dishValid = true; 
    dishRequirements.forEach((val) => { 
    if (!selected[val]) { 
     dishValid = false; 
    } 
    }); 

    if (dishValid) { 
    canMakeDish.innerHTML = "You can make the dish!" 
    } else { 
    canMakeDish.innerHTML = "You can't make the dish :("; 
    } 

}); 

的jsfiddle的工作示例（複選框的間距有點靠不住的，所以一定要確保你選擇正確的成分）：如果我的解釋https://jsfiddle.net/rtq92oyf/2

原諒我有點粗糙......我剛剛開始了長時間的轉變，而且我有點累了。如果您願意，我會很樂意再解釋一次！