JQuery UI对话框，用于将复选框值填充到父级

Question

我要求用户从弹出窗口中选择复选框值，然后在弹出窗口中单击“提交”，所选值应显示回父页面。

我正在玩一些无线电盒值，我可以将其推送到父窗口，但是却在使用复选框值。

这是我的弹出窗口的样子，我的代码是

    <p>Please Select a language:</p>
    <div id="myDialog" title="Select Language">
      <br /><br />
      <input type="checkbox" name="countryCheckbox[]" value="English" checked = "checked" /> English  <br/>
      <input type="checkbox" name="countryCheckbox[]" value="French" /> French  <br/>
      <input type="checkbox" name="countryCheckbox[]" value="Norwagian" /> Norwagian  <br/>
      <input type="checkbox" name="countryCheckbox[]" value="Swedish" /> Swedish <br/>
      <input type="checkbox" name="countryCheckbox[]" value="Hindi" /> Hindi <br/>
      <input type="checkbox" name="countryCheckbox[]" value="Chinese" /> Chinese <br/>
      <br /><br />
      <label for="yes">Yes!</label><input type="radio" id="yes" value="yes" name="question" checked="checked"><br>
      <label for="no">No!</label> <input type="radio" id="no" value="no" name="question">
    </div>

    <p id="text">Selected Languages are: </p>

我的Jquery代码适用于所选的单选按钮，如下所示

    $(function(){
      var execute = function(){
        var answer;
        $("input").each(function(){
          (this.checked == true) ? answer = $(this).val() : null;
        });
        $("<p>").text("You selected " + answer).appendTo($("body"));
        $("#myDialog").dialog("close");
      }
      var cancel = function() {
        $("#myDialog").dialog("close");
      }
      var dialogOpts = {
        buttons: {
          "Submit": execute,
           "Cancel": cancel
        }
      };
      $("#myDialog").dialog(dialogOpts);
    });

我正在尝试添加以下JQuery代码以在父页面上显示所选的复选框值

    $('#myDialog').submit(function(ev){
      ev.preventDefault();

      var arr = [];
      $('input:checkbox:checked').each(function(){
        arr.push($(this).val());
      });
      $(opener.document).contents().find("#text").text(arr.join(","));
      self.close(); 
    });   

请提示，因为我仍在努力整合所选复选框的JQuery代码以显示在父页面上。

Answer 1

你需要遍历每个输入，然后将其存储在数组中以将其附加到正文中。

$(function () {
    var execute = function () {
        var answer = [];;
        $("input").each(function () {
            if (this.checked) answer.push(this.value);
        });
        for (var i = 0; i < answer.length ; i++)
            $("<p>").text("You selected " + answer[i]).appendTo($("body"));
    };
});

<强> Check Fiddle

<强>代码

$(function () {
    var execute = function () {
        var answer = [];;
        $("input").each(function () {
            if (this.checked) answer.push(this.value);
        });
        for (var i = 0; i < answer.length; i++)
        $("<p>").text("You selected " + answer[i]).appendTo($("body"));
    };
    var cancel = function () {
        $("#myDialog").dialog("close");
    }
    var dialogOpts = {
        buttons: {
            "Submit": execute,
                "Cancel": cancel
        }
    };
    $("#myDialog").dialog(dialogOpts);
});

修改

var cancel = function () {
    $("#myDialog").dialog("close");
}
var saveAndCancel = functionI() {
     execute();
     cancel();
}
var dialogOpts = {
    buttons: {
        "Submit": saveAndCancel ,
        "Cancel": cancel
    }
};