从弹出窗口中获取复选框值并显示在父页面的无序列表中

Question

我正在使用 Colorbox Jquery popup 打开一个具有多个复选框和提交按钮的 form。

HTML 代码：

  <div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>

    <div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text"></div>

 <!-- This contains the hidden content for inline calls (POPUP code)-->
    <div style='display:none'>
        <div id='inline_content' style='padding:15px; background:#fff; font-size: 17px;'>
        <form action="" id="popup_form">
                    <input type="checkbox" name="race" value="American Indian or Alaska Native"> American Indian or Alaska Native<br>
                    <input type="checkbox" name="race" value="Asian"> Asian<br> 
                    <input type="checkbox" name="race" value="Black or African American"> Black or African American<br> 
                    <input type="checkbox" name="race" value="Native Hawaiian or Other Pacific Islander"> Native Hawaiian or Other Pacific Islander<br> 
                    <input type="checkbox" name="race" value="White"> White<br> 
                    <input type="submit" name="submit" class="submitbtn" value="Add">
           </form>

       </div>
    </div>

如果用户点击 +添加/编辑 链接，则会打开弹出窗口。然后提交点击后，复选框的选定值将显示在父页面上。为了在父页面上显示复选框的值，我使用了以下脚本。

脚本：

<script>
  $(document).ready(function(){
        $('#popup_form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                          $("#text").text($("#text").text() + $(this).val()+ " ,");

                    });
                    parent.$.colorbox.close();
                    return false;
        });             
    });
</script>

现在发生了什么，

1) 如果我检查过，例如值显示如下的前两个复选框：American Indian or Alaska Native ,Asian ,。如果我再次打开弹出窗口以选择第三个复选框，则弹出窗口显示前两个值检查结果如American Indian or Alaska Native ,Asian ,American Indian or Alaska Native ,Asian ,Black or African American , 我只想显示American Indian or Alaska Native ,Asian ,Black or African American ,

为什么结果会重复？

2) 如何在父页面上以无序列表（以项目符号和文本格式，例如使用<ul><li>）显示结果？

Answer 1

试试这个：您正在尝试将文本添加到先前显示的文本中，该文本是数据复制的地方。相反，您可以将选定的复选框数据存储在字符串中，然后将该字符串替换为 div 的文本。

    $(document).ready(function(){
            //array to store checkbox values
            checkValues = new Array();

            $('#popup_form').submit(function(){
                        //capture all text in a variable
                        var textStr = $('<ul></ul>');
                        //iterate all checkbox values to create ul
                        $.each(checkValues, function( index, value ){
                              textStr.append('<li>'+value+'</li>');
                        });
                        //add text
                        $("#text").html(textStr);
                        parent.$.colorbox.close();
                        return false;
            });

             //add change handler for checkbox        
           $('input:checkbox[name=race]').change(function(){
               value = $(this).val();
               if(this.checked)
                   checkValues.push(value);
               else
               {   //Removing by value
                  checkValues = $.grep(checkValues, function(n, i) { 
                      return n !== value;
                  }); 
               }
          });             
  });