使用javascript过滤多个复选框
使用javascript过滤多个复选框
提问于 2016-06-24 11:10:17
我正在玩耍，并试图创建一个有趣的网站，将列出食谱取决于你勾选的成分。例如，如果我有一个需要牛肉、苹果和甘蓝的食谱，我不想让它出现在结果中，直到所有三种配料都被检查过。
目前，我的脚本将返回至少包含一个选中成分的所有结果。
下面是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();
});
});
}); 我希望有人能给我指明正确的方向，帮助我走出困境。
回答 1
Stack Overflow用户
发布于 2016-06-24 12:30:55
我的答案是使用事件和EventListeners。
向某个包装器div元素添加一个EventListener，该元素将在“onClick”事件上进行更新:由于事件“冒泡”到DOM，如果在包装器div内单击任何嵌套的输入元素(出于您的目的，这是一种成分)，onClick事件将“冒泡”，然后由包含div的EventListener处理。有趣的是，该事件将包含有关其源的信息(名为target：https://developer.mozilla.org/en-US/docs/Web/API/Event/target的属性，这是DOM元素生成该事件的内容)……我们稍后将使用这一事实。
除了事件之外，还有一个对象，它的属性是配料的名称和值true/false (表示用户是否选择了该配料)。然后，使用事件目标的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
如果我的解释有点粗糙，请原谅我……我刚下了长班，我有点累了。如果你愿意的话，我很乐意下次再解释更多！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38005042
复制相关文章
相似问题
腾讯云开发者
