JQuery UI对话框填充复选框值到父

JQuery UI Diaglog to populate checkbox values to parent

本文关键字：复选框 填充 UI 对话框 JQuery      更新时间：2023-09-26

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

我正在玩一些无线电框值，我能够推到父窗口，但与复选框值斗争。

这是我的弹出窗口的样子，我的代码是 
    <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代码，以显示在父页面

您需要遍历每个输入，然后将其存储在数组中，以便将其附加到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"));
    };
});

检查小提琴

$(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
    }
};
相关文章：