I'm trying to show and hide content with checkboxes. I have 7 types of fruit salad. They are as so: 1. Apple 2. Orange 3. Pear 4. Apple-Orange 5. Orange-Pear 6. Apple-Pear 7. Apple-Orange-Pear I want the customer to be able to select their fruit using the 3 check boxes to select the type of salad they want. If the customer chooses, apple I only want apple to show, if they choose orange, i only want orange to show. If they choose apple-orange, i only want the apple-orange fruit salad to show (not the single apple and orange). Same with the Apple-orange-pear fruit salad -- if this is selected, I only want that specific salad to show, not the individual fruits.
But my code selects all the fruit - so for example, if you checkoff apple, orange and pear, it shows all associated fruit, when I only want the apple-orange-pear salad to show (the one unique selection). Can anyone help me with this?
Here is my fiddle: http://ift.tt/1DqOnDL
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="http://ift.tt/1yCEpkO"></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>
Thank you
Aucun commentaire:
Enregistrer un commentaire