Javascript jquery-使用复选框显示/隐藏唯一内容

我正在尝试使用复选框显示和隐藏内容。 我有7种水果沙拉。 它们是： 1.苹果 2.橙色 3.梨 4.苹果橙 5.橙梨 6.苹果梨 7.苹果橙梨 我希望客户能够使用3个复选框选择他们想要的沙拉类型来选择他们的水果。如果客户选择苹果，我只想让苹果展示，如果他们选择橙色，我只想让橙色展示。如果他们选择苹果橙，我只想展示苹果橙水果沙拉（而不是单一的苹果和橙子）。苹果橙梨水果沙拉也一样——如果选择了这个，我只想展示特定的沙拉，而不是单个的水果

但是我的代码选择了所有的水果——例如，如果你勾选了苹果、橘子和梨，它会显示所有相关的水果，而我只想显示苹果橘子梨沙拉（唯一的选择）。有人能帮我吗

这是我的小提琴：

我的代码：

<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>

.盒子{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
.苹果{
背景：#F00；
}
.橙色{
背景：#F60；
}
梨先生{
背景：#FF0；
}
.fs苹果橙{
背景：#F66；
}
.fs橙梨{
背景：#0C9；
}
苹果梨{
背景:#066；
}
.苹果橙梨{
背景：#00F；
}
苹果
橙色
梨
苹果
橙色
梨
苹果橙水果沙拉
橙梨水果沙拉
苹果梨水果沙拉
苹果橙梨水果沙拉
$（'input[type=“checkbox”]”）。单击（函数（）{
$（'.box'）.hide（）；
如果（$（'#apple'）.is（':checked'））$（'.apple.box'）.show（）；
如果（$（'#orange'）.is（':checked'））$（'.orange.box'）.show（）；
如果（$（'#pear'）.is（':checked'））$（'.pear.box'）.show（）；
如果（$（“#苹果”）.is（':checked'）&&&！$（'#橙色'）。is（':checked'））{
$（'.fs apple orange.box'）.show（）；
}
如果（$（'orange'）.is（'：checked'）&&&！$（'pear'）.is（'：checked'））{
$（'.fs orange pear.box'）.show（）；
}
如果（$（'apple'）.is（'：checked'）&&（'pear'）.is（'：checked'））{
$（'.fs apple pear.box'）.show（）；
}
如果（$（'苹果'）.is（'勾选'）&&&（'橙色'）.is（'勾选'）&（'梨'）.is（'勾选'）&（'梨'）.is（'勾选'）{
$（'.apple-orange-pear.box'）.show（）；
}
});

---

谢谢

如果您的陈述有一些问题。你的一些条件毫无意义，比如

if ($('#apple').is(':checked') && !$('#orange').is(':checked'))
    $('.fs-apple-orange.box').show();

当苹果被选中而橙色没有被选中时，它会显示苹果橙色框。对于单个水果，您需要检查其他水果是否为假

$（'.apple橙色pear.box'）.show（）；
$（'input[type=“checkbox”]”）。单击（函数（）{
$（'.box'）.hide（）；
var apple=$（“#apple”）。是（“：选中”）；
var orange=$（“#orange”）。为（“：选中”）；
var pear=$（'#pear'）。是（':checked'）；
if（apple&！orange&&！pear）$（'.apple.box'）.show（）；
如果（！apple&&orange&&pear）$（'.orange.box'）.show（）；
如果（！apple&&！orange&&pear）$（'.pear.box'）.show（）；
else if（苹果、橘子和梨）{
$（'.fs apple orange.box'）.show（）；
}
如果（！苹果、橘子和梨）{
$（'.fs orange pear.box'）.show（）；
}
其他如果（苹果、橘子和梨）{
$（'.fs apple pear.box'）.show（）；
}
if（苹果、橘子和梨）{
$（'.apple-orange-pear.box'）.show（）；
}
});
.box{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
.苹果{
背景：#F00；
}
.橙色{
背景：#F60；
}
梨先生{
背景：#FF0；
}
.fs苹果橙{
背景：#F66；
}
.fs橙梨{
背景：#0C9；
}
苹果梨{
背景:#066；
}
.苹果橙梨{
背景：#00F；
}

苹果
橙色
梨
苹果
橙色
梨
苹果橙水果沙拉
橙梨水果沙拉
苹果梨水果沙拉
苹果橙梨水果沙拉

$（'input[name=“colorCheckbox”]”）。单击（函数（）{
$（'.box'）.hide（）；
变量a=$（“#苹果”）。是（“：选中”）；
变量o=$（'#橙色'）。是（':checked'）；
var p=$（'#pear'）。是（':checked'）；
如果（a&&o&&p）
return$（'.apple-orange-pear.box'）.show（）；
如果（a&p）
return$（'.fs apple pear.box'）.show（）；
如果（o&p）
return$（'.fs orange pear.box'）.show（）；
如果（a&&o）
return$（'.fs apple orange.box'）.show（）；
如果（a）
返回$（'.apple.box'）.show（）；
如果（o）
返回$（'.orange.box'）.show（）；
如果（p）
返回$（'.pear.box'）.show（）；
});
.box{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
.苹果{
背景：#F00；
}
.橙色{
背景：#F60；
}
梨先生{
背景：#FF0；
}
.fs苹果橙{
背景：#F66；
}
.fs橙梨{
背景：#0C9；
}
苹果梨{
背景:#066；
}
.苹果橙梨{
背景：#00F；
}

苹果
橙色
梨
苹果
橙色
梨
苹果橙水果沙拉
橙梨水果沙拉
苹果梨水果沙拉
苹果橙梨水果沙拉
无论你吃什么水果，吃多少水果，这都有效

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
）

另一方面，您应该将所有脚本放在
中，而不是像这样包装它
jQuery（function（）{/*code*/}）。在DOM准备就绪之前，jQuery不会运行代码

另外，如果每个
fs-…
标记只有一个
div
，您可能希望将其用作ID而不是类，因为按ID匹配比按类匹配快

以下是关于的jQuery文档。
一种更具伸缩性的方法是将数据属性中的过滤器值设置为box元素上的json数组

<div class="box"  data-filters='["pear"]'>Pear</div>
<div class="box"  data-filters='["apple","orange"]'>Apple Orange Fruit Salad</div>

现在，当您在混合中获得一个新项目时，您不必重构
<div class="box"  data-filters='["pear"]'>Pear</div>
<div class="box"  data-filters='["apple","orange"]'>Apple Orange Fruit Salad</div>

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();
});