Jquery创建基于属性分组的复选框

我有这样一个数组：

var arr = [
            { Group: 'Fruits', Name: 'Apple' },
            { Group: 'Fruits', Name: 'Pears' },
            { Group: 'Veggies', Name: 'Tomatoes' },
            { Group: 'Veggies', Name: 'Carrots' }
          ];

<div id="container">
    <h4>
        Fruits</h4>
    <ul id="Fruits">
        <li>
            <input type="checkbox" name="Apples" id="Fruits-Apples" /><label>Apples</label></li>
        <li>
            <input type="checkbox" name="Pears" id="Fruits-Pears" /><label></label>Pears</li>
    </ul>
    <h4>
        Veggies</h4>
    <ul id="Veggies">
        <li>
            <input type="checkbox" name="Tomatoes" id="Veggies-Tomatoes" /><label>Tomatoes</label></li>
        <li>
            <input type="checkbox" name="Carrots" id="Veggies-Carrots" /><label>Carrots</label></li>
    </ul>
</div>

我想为HTML容器中的每个组创建复选框

所以我得到如下输出：

var arr = [
            { Group: 'Fruits', Name: 'Apple' },
            { Group: 'Fruits', Name: 'Pears' },
            { Group: 'Veggies', Name: 'Tomatoes' },
            { Group: 'Veggies', Name: 'Carrots' }
          ];

<div id="container">
    <h4>
        Fruits</h4>
    <ul id="Fruits">
        <li>
            <input type="checkbox" name="Apples" id="Fruits-Apples" /><label>Apples</label></li>
        <li>
            <input type="checkbox" name="Pears" id="Fruits-Pears" /><label></label>Pears</li>
    </ul>
    <h4>
        Veggies</h4>
    <ul id="Veggies">
        <li>
            <input type="checkbox" name="Tomatoes" id="Veggies-Tomatoes" /><label>Tomatoes</label></li>
        <li>
            <input type="checkbox" name="Carrots" id="Veggies-Carrots" /><label>Carrots</label></li>
    </ul>
</div>

水果


苹果

梨

蔬菜


西红柿

胡萝卜

---

使用jquery执行此操作的最佳方法是什么？

查看jquery模板

var content=''；
var prev=''；
for（arr中的var arrayIndex）{
if（prev！=arr[arrayIndex][0]）
{
prev=arr[arrayIndex][0]；
content+=''+arr[arrayIndex][0]+'
；
$（“#容器”）。追加（内容）；
}
}
for（arr中的var arrayIndex）{
变量列表=“
”+
''+
''+arr[arrayIndex][1]+''+
"李",；
$（'#'+arr[arrayIndex][0]+'>ul'）。追加（列表）；
}

---

试试这个。这应该行得通，但我没有检查代码，我认为逻辑是正确的

我修复了Kanishka的代码，使其正常工作：

var content = '';
var prev = '';

for (var arrayIndex in arr)
{
    if (prev != arr[arrayIndex].Group)
    {
        prev = arr[arrayIndex].Group;
        content = '<h4>' + arr[arrayIndex].Group + '</h4><ul id="' + arr[arrayIndex].Group + '"></ul>';
        $('#container').append(content);
    }
}

for (var arrayIndex in arr)
{
    var list = '<li>' +
            '<input type="checkbox"  id="' + arr[arrayIndex].Group + '-' + arr[arrayIndex].Name + '" />' +
            '<label>' + arr[arrayIndex].Name + '</label>' + '</li>';

    $('#container > ' + '#' + arr[arrayIndex].Group).append(list);
}         

var内容=”；
var prev=''；
for（arr中的var arrayIndex）
{
if（prev！=arr[arrayIndex].Group）
{
prev=arr[arrayIndex]。组；
content=''+arr[arrayIndex].Group+'
；
$（“#容器”）。追加（内容）；
}
}
for（arr中的var arrayIndex）
{
变量列表=“
”+
'' +
''+arr[arrayIndex].Name+''+'
'；
$（“#容器>”+“#”+arr[arrayIndex].Group）.append（列表）；
}