Question

我正在使用 Colorbox Jquery弹出窗口来打开一个表单，它有多个chekbox并提交按钮。

HTML code：

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

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

1 个答案: