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

我正在使用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>

$（文档）.ready（函数（）{
$（'popup#u form'）。提交（函数（）{
$（'input:checkbox:checked'）。每个（函数（）{
$（“#text”）.text（$（“#text”）.text（）+$（this.val（）+“，”）；
});
父项。$.colorbox.close（）；
返回false；
});             
});

现在发生的事情

1） 如果我选中前两个复选框，则值显示如下：

美洲印第安人或阿拉斯加土著，亚洲人，

。如果我再次打开弹出窗口以选择第三个复选框，则弹出窗口将显示前两个选中的值，如

美洲印第安人或阿拉斯加土著、亚洲人、美洲印第安人或阿拉斯加土著、亚洲人、美洲印第安人或阿拉斯加土著、亚洲人、黑人或非裔美国人，

我只想显示

美洲印第安人或阿拉斯加土著、亚洲人、黑人或非裔美国人，

为什么结果会重复

---

2） 如何在父页面上显示未排序列表中的结果（以项目符号和文本格式，例如使用

）

尝试以下操作：您正在尝试将文本添加到先前显示的文本中，该文本是数据复制的地方。相反，您可以将选中的复选框数据存储在字符串中，然后将该字符串替换为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;
                  }); 
               }
          });             
  });

$（文档）.ready（函数（）{
//用于存储复选框值的数组
checkValues=新数组（）；
$（'popup#u form'）。提交（函数（）{
//捕获变量中的所有文本
var textStr=$（“
”）；
//迭代所有复选框值以创建ul
$.each（检查值、函数（索引、值）{
textStr.append（'
'+value+'
'）；
});
//添加文本
$（“#text”）.html（textStr）；
父项。$.colorbox.close（）；
返回false；
});
//为复选框添加更改处理程序
$（'input:checkbox[name=race]'）。更改（函数（）{
value=$（this.val（）；
如果（选中此项）
checkValues.push（值）；
其他的
{//按值删除
checkValues=$.grep（checkValues，函数（n，i）{
返回n！==值；
}); 
}
});             
});

$（“输入：复选框：选中”）。这是选择复选框的正确方法吗。使用正确的属性选择器-@Thilak Rao：我不能这么说，因为我对javascript还不熟悉。我尝试过一些类似的答案@Bhushan Kawadkar:Cool.：）它现在没有复制。结果是这样的：

美国印第安人或阿拉斯加土著亚裔黑人或非裔美国人

。您能建议我如何在适当的无序列表中显示结果吗？无序表示您希望按照选中复选框的顺序而不是html中复选框的实际顺序显示列表，对吗？是的，当用户选中复选框（用户可以选中任何复选框）时，结果应以无序列表的形式显示，即项目符号和文本（

）@Bhushan Kawadkar:`textStr.append（'
'+value+'
）；`此行出错。@Bhushan Kawadkar:opening
{
丢失。现在的结果如下：
[object object]