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 に答える