javascript - jquery - 显示/隐藏带有复选框的独特内容

Question

我正在尝试使用复选框显示和隐藏内容。我有 7 种水果沙拉。他们是这样的:1. 苹果2.橙色3.梨4. 苹果橙5.橙梨6.苹果梨7. 苹果-橙-梨我希望客户能够使用 3 个复选框选择他们想要的沙拉类型来选择他们的水果。如果客户选择，apple 我只想显示 apple，如果他们选择 orange，我只想显示 orange。如果他们选择苹果橙，我只想显示苹果橙水果沙拉(而不是单一的苹果和橙子)。与 Apple-orange-pear 水果沙拉一样——如果选择这个，我只想显示特定的沙拉，而不是单个水果。

但我的代码会选择所有水果 - 例如，如果您勾选苹果、橙子和梨，它会显示所有相关的水果，而我只想显示苹果-橙子-梨沙拉(唯一的选择)。谁能帮我解决这个问题？

这是我的 fiddle : https://jsfiddle.net/daysable/41uusunm/

我的代码:

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

谢谢

Answer 1

$('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>