多个复选框选择结果

Question

我有3个颜色的复选框的红绿蓝。我的目标是让用户做一个选择，并显示一个独特的div。例如，选择红色，看到。红色框。选择红色和绿色显示。redgreen框，隐藏。红色和。绿色等。3有8种组合，包括不选择(默认是隐藏的)。

我愿意接受所有的建议，如果你知道一个更有效的方法来得到我需要的，请分享。我已经使它工作，但当我添加更多的组合，其他人仍然显示。

$('input[type="checkbox"]').click(function () {
$('.box').hide();
if ($('#red').is(':checked')) $('.red.box').show();
if ($('#green').is(':checked')) $('.green.box').show();
if ($('#blue').is(':checked')) $('.blue.box').show();    

if ($('#red').is(':checked') && $('#green').is(':checked')) $('.redgreen.box').show() && $('.red.box, .green.box').hide();

});

.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.redgreen {
border: 1px solid black;
}
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.blue {
background: #0000ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="checkbox" id="red" name="colorCheckbox" value="red">red</label>
<label>
<input type="checkbox" id="green" name="colorCheckbox" value="green">green</label>
<label>
<input type="checkbox" id="blue" name="colorCheckbox" value="blue">blue</label>
</div>
<div class="red box"><strong>red</strong></div>
<div class="green box"><strong>green</strong></div>
<div class="blue box"><strong>blue</strong></div>
<div class="redgreen box"><strong>red and green</strong></div>

Answer 1

为了实现您的目标，您可以在.box元素上使用data属性，这些属性与需要选中的复选框相匹配，以便显示复选框。

您可以使用map()构建一个保存检查值的数组，并将其与使用filter()从.box上的data属性构建的数组进行比较。然后可以显示匹配的元素。

let $boxes = $('.box');
let $checkboxes = $(':checkbox').on('change', e => {
let values = $checkboxes.filter(':checked').map((i, el) => el.value).get();
$boxes.hide().filter((i, el) => areArraysEqual($(el).data('filter').split(','), values)).show();
});
let areArraysEqual = (a1, a2) => a1.sort().toString() === a2.sort().toString();

.box {
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red { background: #F00; }
.green { background: #0F0; }
.blue { background: #00F; }
.redgreen { background: #FF0; }
.redblue { background: #F0F; }
.greenblue { background: #0FF; }
.redbluegreen { background: #FFF; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" id="red" name="colorCheckbox" value="red">red</label>
<label><input type="checkbox" id="green" name="colorCheckbox" value="green">green</label>
<label><input type="checkbox" id="blue" name="colorCheckbox" value="blue">blue</label>
</div>
<div class="red box" data-filter="red"><strong>red</strong></div>
<div class="green box" data-filter="green"><strong>green</strong></div>
<div class="blue box" data-filter="blue"><strong>blue</strong></div>
<div class="redgreen box" data-filter="red,green"><strong>red and green</strong></div>
<div class="redblue box" data-filter="red,blue"><strong>red and blue</strong></div>
<div class="greenblue box" data-filter="green,blue"><strong>green and blue</strong></div>
<div class="redgreenblue box" data-filter="red,green,blue"><strong>red, green and blue</strong></div>

注意，areArraysEqual()逻辑是快速和简单的版本。有更好的执行和更准确的模式来解决这个问题。如果读者想要对此进行更多的研究，我将把它作为一个练习留给读者。

Answer 2

将选择存储在状态变量中:

const state = [];
If($('#red').is(':checked')) state.push('.red')
If($('#blue').is(':checked')) state.push('.blue')

然后将它们组合成一个选区

$(state.join('')).show()

可以添加if语句来检查state是否为空，如果为空则显示默认块。