用复选框显示/隐藏唯一的内容
show/hide unique content with checkboxes
我试图用复选框显示和隐藏内容。我有七种水果沙拉。它们是这样的:1. 苹果2. 橙色3.梨4. Apple-Orange5. Orange-Pear6. Apple-Pear7. Apple-Orange-Pear我希望顾客能够使用3个复选框来选择他们想要的沙拉类型。如果顾客选择苹果，我只希望苹果显示，如果他们选择橙色，我只希望橙色显示。如果他们选择了苹果橙，我只希望展示苹果橙水果沙拉(而不是单一的苹果橙)。苹果-橘子-梨子水果沙拉也是如此——如果选择了这种沙拉，我只希望显示特定的沙拉，而不是单个水果。
但是我的代码选择了所有的水果——例如，如果你勾选了苹果、橙子和梨，它会显示所有相关的水果，而我只想显示苹果-橙子-梨沙拉(唯一的选择)。有人能帮我一下吗?
这是我的小提琴:https://jsfiddle.net/daysable/41uusunm/
my code:
<style>
.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.apple {
background: #F00;
}
.orange {
background: #F60;
}
.pear {
background: #FF0;
}
.fs-apple-orange {
background: #F66;
}
.fs-orange-pear {
background: #0C9;
}
.fs-apple-pear {
background: #066;
}
.apple-orange-pear {
background: #00F;
}
</style>
<div>
<label>
<input type="checkbox" id="apple" name="colorCheckbox" value="apple">apple</label>
<label>
<input type="checkbox" id="orange" name="colorCheckbox" value="orange">orange</label>
<label>
<input type="checkbox" id="pear" name="colorCheckbox" value="pear">pear</label>
</div>
<div class="apple box">Apple</div>
<div class="orange box">Orange</div>
<div class="pear box">Pear</div>
<div class="fs-apple-orange box">Apple Orange Fruit Salad</div>
<div class="fs-orange-pear box">Orange Pear Fruit Salad</div>
<div class="fs-apple-pear box">Apple Pear Fruit Salad</div>
<div class="apple-orange-pear box">Apple Orange Pear Fruit Salad</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').click(function () {
$('.box').hide();
if ($('#apple').is(':checked')) $('.apple.box').show();
if ($('#orange').is(':checked')) $('.orange.box').show();
if ($('#pear').is(':checked')) $('.pear.box').show();
if ($('#apple').is(':checked') && !$('#orange').is(':checked')) {
$('.fs-apple-orange.box').show();
}
if ($('#orange').is(':checked') && !$('#pear').is(':checked')) {
$('.fs-orange-pear.box').show();
}
if ($('#apple').is(':checked') && $('#pear').is(':checked')) {
$('.fs-apple-pear.box').show();
}
if ($('#apple').is(':checked') && $('#orange').is(':checked') && $('#pear').is(':checked')) {
$('.apple-orange-pear.box').show();
}
});
</script>
谢谢
$('input[name="colorCheckbox"]').click(function () {
$('.box').hide();
var a = $('#apple').is(':checked');
var o = $('#orange').is(':checked');
var p = $('#pear').is(':checked');
if(a && o && p)
return $('.apple-orange-pear.box').show();
if(a && p)
return $('.fs-apple-pear.box').show();
if(o && p)
return $('.fs-orange-pear.box').show();
if(a && o)
return $('.fs-apple-orange.box').show();
if(a)
return $('.apple.box').show();
if(o)
return $('.orange.box').show();
if(p)
return $('.pear.box').show();
});
$('input[name="colorCheckbox"]').click(function () {
$('.box').hide();
var a = $('#apple').is(':checked');
var o = $('#orange').is(':checked');
var p = $('#pear').is(':checked');
if(a && o && p)
return $('.apple-orange-pear.box').show();
if(a && p)
return $('.fs-apple-pear.box').show();
if(o && p)
return $('.fs-orange-pear.box').show();
if(a && o)
return $('.fs-apple-orange.box').show();
if(a)
return $('.apple.box').show();
if(o)
return $('.orange.box').show();
if(p)
return $('.pear.box').show();
});.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.apple {
background: #F00;
}
.orange {
background: #F60;
}
.pear {
background: #FF0;
}
.fs-apple-orange {
background: #F66;
}
.fs-orange-pear {
background: #0C9;
}
.fs-apple-pear {
background: #066;
}
.apple-orange-pear {
background: #00F;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>
<input type="checkbox" id="apple" name="colorCheckbox" value="apple">apple</label>
<label>
<input type="checkbox" id="orange" name="colorCheckbox" value="orange">orange</label>
<label>
<input type="checkbox" id="pear" name="colorCheckbox" value="pear">pear</label>
</div>
<div class="apple box">Apple</div>
<div class="orange box">Orange</div>
<div class="pear box">Pear</div>
<div class="fs-apple-orange box">Apple Orange Fruit Salad</div>
<div class="fs-orange-pear box">Orange Pear Fruit Salad</div>
<div class="fs-apple-pear box">Apple Pear Fruit Salad</div>
<div class="apple-orange-pear box">Apple Orange Pear Fruit Salad</div>无论你有什么水果，有多少，这个方法都有效。
jQuery(function() {
jQuery("input[name=colorCheckbox]").click(function() {
//Get a list of the checked fruits.
fruits = jQuery("input[name=colorCheckbox]:checked").map(function() {
return this.id;
}).get().sort().join("-");
//Hide all boxes.
jQuery(".box").hide();
//Show the relevant one.
jQuery(".fs-" + fruits).show();
});
});
确保将所有类名设置为fs-fruit1-fruit2，水果名称按字母顺序排序(如fs-apple-pear)。
附带说明，您应该将所有脚本放在<head>中，而不是像jQuery(function() { /* CODE */ });这样包装它。在DOM准备好之前，jQuery不会运行代码。
另外，如果每个fs-...标签只有一个div，您可能希望将其用作ID而不是类，因为按ID匹配比按类匹配更快。
一种更具可伸缩性的方法是将数据属性中的筛选值设置为框元素上的json数组。
<div class="box" data-filters='["pear"]'>Pear</div>
<div class="box" data-filters='["apple","orange"]'>Apple Orange Fruit Salad</div>
可以使用jQuery data()作为数组读取。
然后你可以使用通用的数组匹配代码，不关心你使用的具体值是什么，或者有多少个复选框....只需要在复选框值和数组值之间进行匹配
var $checks=$('input[type="checkbox"]');
$checks.click(function () {
// create array of checkbox values
var values=$checks.filter(':checked').map(function(){
return this.value
}).get();
// hide all the boxes and start filtering for matches
$('.box').hide().filter(function(){
// read filter array from box element
var filterArr = $(this).data('filters');
// reject if array lengths differ
if(filterArr.length !== values.length){
return false;
}
// check for all values matching between checkboxes and box filters
var isMatch = filterArr.filter(function(val){
return values.indexOf(val) >-1
}).length === values.length;
return isMatch
// show the matching elemnts
}).show();
});
现在，当你得到一个新的项目在混合，你不需要重构代码，只要遵循相同的html格式
演示您的if语句有一些问题。你的一些条件毫无意义，比如
if ($('#apple').is(':checked') && !$('#orange').is(':checked'))
$('.fs-apple-orange.box').show();
当苹果被选中而橘子没有被选中时，它会显示苹果橙色的盒子。对于单个水果，您需要检查其他水果是否为假。
$('.apple-orange-pear.box').show();
$('input[type="checkbox"]').click(function () {
$('.box').hide();
var apple=$('#apple').is(':checked');
var orange=$('#orange').is(':checked');
var pear=$('#pear').is(':checked');
if (apple&&!orange && !pear) $('.apple.box').show();
else if (!apple&&orange&&!pear) $('.orange.box').show();
else if (!apple&&!orange&&pear) $('.pear.box').show();
else if (apple && orange &&!pear) {
$('.fs-apple-orange.box').show();
}
else if (!apple && orange && pear) {
$('.fs-orange-pear.box').show();
}
else if (apple&&!orange&&pear) {
$('.fs-apple-pear.box').show();
}
if (apple&&orange&&pear) {
$('.apple-orange-pear.box').show();
}
});.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.apple {
background: #F00;
}
.orange {
background: #F60;
}
.pear {
background: #FF0;
}
.fs-apple-orange {
background: #F66;
}
.fs-orange-pear {
background: #0C9;
}
.fs-apple-pear {
background: #066;
}
.apple-orange-pear {
background: #00F;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label>
<input type="checkbox" id="apple" name="colorCheckbox" value="apple" checked>apple</label>
<label>
<input type="checkbox" id="orange" name="colorCheckbox" value="orange"checked>orange</label>
<label>
<input type="checkbox" id="pear" name="colorCheckbox" value="pear" checked>pear</label>
</div>
<div class="apple box">Apple</div>
<div class="orange box">Orange</div>
<div class="pear box">Pear</div>
<div class="fs-apple-orange box">Apple Orange Fruit Salad</div>
<div class="fs-orange-pear box">Orange Pear Fruit Salad</div>
<div class="fs-apple-pear box">Apple Pear Fruit Salad</div>
<div class="apple-orange-pear box">Apple Orange Pear Fruit Salad</div>相关文章：
- 在单击任何位置时隐藏元素，而不检查每次DOM单击
- 显示5秒后隐藏潜水
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 浮动页脚栏-使用Bootstrap隐藏
- 在jquery中为显示/隐藏设置cookie
- 单击按钮后如何逐个调用分区，上一个分区将隐藏
- 从var向代码隐藏函数传递值
- Image赢得't隐藏在滚动jQuery上
- 具有rowGrouping的数据表无法隐藏列
- Jquery隐藏未触发
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 分部隐藏在jquery中不起作用
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?）
- 使用jQuery隐藏具有非唯一属性的元素
- 显示特定选项的隐藏文本框获胜'当它是唯一的选择时，它不起作用
- 如何使id唯一调用显示隐藏方法上的每个id点击在javascript
- 用复选框显示/隐藏唯一的内容
- 隐藏唯一的API密钥在webOS (Enyo/JavaScript)
- 切换HTML链接文本'显示/隐藏'显示/隐藏用于注释的内联表单;创建唯一的标识符，这样页面上的所有评论链
