0

我有一个要求，用户应该从弹出窗口中选择复选框值，然后单击弹出窗口上的提交，所选值应该显示回父页面。

我正在使用一些单选框值，我可以将它们推送到父窗口，但在复选框值方面遇到了困难。

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

    <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 代码以显示在父页面上。

4

1 回答 1

0

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

$(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"));
    };
});

检查小提琴

代码

$(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
    }
};
于 2013-06-05T22:09:49.870 回答