时间戳

首页 > 解决方案 > 多个复选框选择结果

javascript - 多个复选框选择结果

问题描述

我有 3 色复选框的红绿蓝。我的目标是让用户做出选择并显示一个独特的 div。例如选择红色看到.red 框。选择红色和绿色会显示 .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>

标签： javascriptcheckbox

解决方案

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

您可以构建一个包含使用检查的值的数组，并将其与根据using上的属性构建的数组map()进行比较。然后，您可以显示匹配的元素。data.boxfilter()

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

推荐阅读