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

Question

我正在使用Colorbox Jquery弹出窗口打开具有多个检查框和提交按钮的表单 。

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;
                  }); 
               }
          });             
  });