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

Question

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

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

假设一个用户提交了一个勾选了三个复选框的表单：樱桃、葡萄和草莓。当用户提交表单时，"水果"字段会收到以下信息：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>