使用 Jquery 使用列表中的唯一值创建复选框答案

【问题标题】：Create checkboxs using unique values from a list, using Jquery使用 Jquery 使用列表中的唯一值创建复选框
【发布时间】：2022-06-29 02:53:46
【问题描述】：

我使用两个脚本从列表 a 中获取所有唯一值，而不是创建一个仅包含这些唯一值的复选框列表。但它只是将第一项作为复选框返回。

var items = [];
$( '.list li' ).each( function() {
    // If the text isn't in the array, add it
    if ( $.inArray( $(this).text(), items ) === -1 ) {
        items.push( $(this).text() );
    } 
} );
$(document).ready(function() {
    var list = [items];
    for (var value of list) {
      $('#container')
        .append(`<input type="checkbox" id="${value}" name="interest" value="${value}">`)
        .append(`<label for="${value}">${value}</label></div>`)
        .append(`<br>`);
    }
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list" style="display:none;">
<ul>

<li id="li1" class="popupul" style="text-align: left;">International</li>
<li id="li10" class="popupul" style="text-align: left;">Science</li>
<li id="li332" class="popupul" style="text-align: left;">Physics</li>
<li id="li2" class="popupul" style="text-align: left;">Africa</li>
<li id="li3" class="popupul" style="text-align: left;">Asia</li>
<li id="li5" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li8" class="popupul" style="text-align: left;">North America</li>
<li id="li9" class="popupul" style="text-align: left;">South America</li>
<li id="li222" class="popupul" style="text-align: left;">International</li>
<li id="li110" class="popupul" style="text-align: left;">Science</li>
<li id="li32" class="popupul" style="text-align: left;">Africa</li>
<li id="li23" class="popupul" style="text-align: left;">Asia</li>
<li id="li35" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li38" class="popupul" style="text-align: left;">North America</li>
<li id="li19" class="popupul" style="text-align: left;">South America</li>
 </ul>
</div>
    <div id="container"></div>
    <div>
    </div>

【问题讨论】：

标签： jquery

【解决方案1】：

您需要使用 foreach 进行迭代

var items = [];
$( '.list li' ).each( function() {
    // If the text isn't in the array, add it
    if ( $.inArray( $(this).text(), items ) === -1 ) {
        items.push( $(this).text() );
    } 
} );
$(document).ready(function() {
console.log('main',items);
    var list = items,
    check   =   "";
    list.forEach(function(value,index) {
        check += `<input type="checkbox" id="${value}" name="interest" value="${value}"><label for="${value}">${value}</label><br>`;
    });
    $('#container').append(check);
  }

);

【讨论】：

【解决方案2】：

问题是var list = [items]; 应该是var list = items;

var items = [];
$( '.list li' ).each( function() {
    // If the text isn't in the array, add it
    if ( $.inArray( $(this).text(), items ) === -1 ) {
        items.push( $(this).text() );
    } 
} );
$(document).ready(function() {
    var list = items;
    for (var value of list) {
      $('#container')
        .append(`<input type="checkbox" id="${value}" name="interest" value="${value}">`)
        .append(`<label for="${value}">${value}</label></div>`)
        .append(`<br>`);
    }
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list" style="display:none;">
<ul>

<li id="li1" class="popupul" style="text-align: left;">International</li>
<li id="li10" class="popupul" style="text-align: left;">Science</li>
<li id="li332" class="popupul" style="text-align: left;">Physics</li>
<li id="li2" class="popupul" style="text-align: left;">Africa</li>
<li id="li3" class="popupul" style="text-align: left;">Asia</li>
<li id="li5" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li8" class="popupul" style="text-align: left;">North America</li>
<li id="li9" class="popupul" style="text-align: left;">South America</li>
<li id="li222" class="popupul" style="text-align: left;">International</li>
<li id="li110" class="popupul" style="text-align: left;">Science</li>
<li id="li32" class="popupul" style="text-align: left;">Africa</li>
<li id="li23" class="popupul" style="text-align: left;">Asia</li>
<li id="li35" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li38" class="popupul" style="text-align: left;">North America</li>
<li id="li19" class="popupul" style="text-align: left;">South America</li>
 </ul>
</div>
    <div id="container"></div>
    <div>
    </div>

【讨论】：