从冒号分隔的字符串中检查复选框

Question

我们的在线表单从数据库中为我们的一个字段接收一个以冒号分隔的字符串。例如，我们有一个名为“Favorite Fruits”的复选框组，其中包含八个复选框：

 Apples - AP
 Bananas - BA
 Blueberries - BL
 Cherries - CH
 Grapes - GR
 Oranges - OR
 Raspberries - RA
 Strawberries - ST

假设用户提交了一个选中三个复选框的表单：樱桃、葡萄和草莓。当用户提交表单时，“fruits”字段会收到以下信息：CH、GR、ST。当用户重新访问页面时，它不是以逗号分隔，而是像这样接收 CH::GR::ST。对于这个例子，我试图弄清楚如何检查复选框，以便在页面加载时检查樱桃、葡萄和草莓。

这是我目前所拥有的：

   <div id='fruits'>
    <input type='checkbox' id='AP' value='Apples' />Apples<br />
    <input type='checkbox' id='BA' value='Bananas' />Bananas<br />
    <input type='checkbox' id='BL' value='Blueberries' />Blueberries<br />
    <input type='checkbox' id='CH' value='Cherries' />Cherries<br />
    <input type='checkbox' id='GR' value='Grapes' />Grapes<br />
    <input type='checkbox' id='OR' value='Oranges' />Oranges<br />
    <input type='checkbox' id='RA' value='Raspberries' />Raspberries<br />
    <input type='checkbox' id='ST' value='Strawberries' />Strawberries<br />
   </div> 

    var faveFruits = ['CH','GR','ST'];

    $("#fruits").find('[id=' + faveFruits.join('], [id=') + ']').prop("checked", true);

这很好用，因为 faveFruits 变量/数组的定义方式。它实际上像这样在页面上加载：

    var faveFruits = CH::GR::ST

https://jsfiddle.net/Codewalker/mw9746pq/12/

Answer 1

您可以使用.reduce() 来构建选择器：

faveFruits.reduce((a,e,idx,arr) => a+='#' + e + (idx+1 == arr.length ? '' : ', '), '')

上一行的结果是：#CH,#GR,#ST

因为您是通过 id 选择的，所以您可以直接解决它们，而无需使用父元素 fruits。

如果输入字符串是：

 var faveFruits = "CH::GR::ST";

您可以应用拆分加减少：

var selector = faveFruits.split('::').reduce((a,e,idx,arr) => a+='#' + e + (idx+1 == arr.length ? '' : ', '), '')

var faveFruits = ['CH','GR','ST'];


var selector = faveFruits.reduce((a,e,idx,arr) => a+='#' + e + (idx+1 == arr.length ? '' : ', '), '');
console.log(selector);

$(selector).prop("checked", true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id='fruits'>
    <input type='checkbox' id='AP' value='Apples' />Apples<br />
    <input type='checkbox' id='BA' value='Bananas' />Bananas<br />
    <input type='checkbox' id='BL' value='Blueberries' />Blueberries<br />
    <input type='checkbox' id='CH' value='Cherries' />Cherries<br />
    <input type='checkbox' id='GR' value='Grapes' />Grapes<br />
    <input type='checkbox' id='OR' value='Oranges' />Oranges<br />
    <input type='checkbox' id='RA' value='Raspberries' />Raspberries<br />
    <input type='checkbox' id='ST' value='Strawberries' />Strawberries<br />
</div>