多个复选框选择结果答案

【问题标题】：Multiple Checkbox selection results多个复选框选择结果
【发布时间】：2021-06-08 07:29:05
【问题描述】：

我有 3 色复选框的红绿蓝。我的目标是让用户做出选择并显示一个独特的 div。例如。选择红色请参阅 .red 框。选择 Red 和 Green 会显示 .redgreen 框并隐藏 .red 和 .green 等。这 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>

【问题讨论】：

Java != Javascript
那么，这里有什么问题？我无法得到它...
如果您的代码正常工作，最好在 codereview.stackexchange.com 上询问此问题
我的代码不起作用。我已将其设置为 2 种组合，但需要 8 种。我不确定如何添加更多组合并隐藏其他结果，尤其是在不重复多条意大利面条线的情况下。

标签： javascript checkbox

【解决方案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() 逻辑是快速简便的版本。有更好的性能和更准确的模式来解决这个问题。如果读者想对此进行更多研究，我会将其作为练习留给读者。

【讨论】：

【解决方案2】：

将您的选择存储在状态变量中：

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

然后将它们组合起来进行选择

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

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

【讨论】：