0

こんにちは、送信ボタン付きの 2 つのラジオ ボタン yes と no を含むフォームを作成する必要があります。ユーザーがオプションを選択しない場合は、「オプションを 1 つ選択してください」というアラートがポップアップ表示されます。はい、送信ボタンを押すと、jquery ダイアログ ボックスが 2 つポップアップ表示されます。ダイアログボックスのボタン OK とキャンセル --> ユーザーが [OK] をクリックすると別のページに移動し、ラジオ ボタンと送信ボタンがない場合はダイアログ ボックスに同じ [OK] ボタンと [キャンセル] ボタンが表示され、[OK] の場合は次のページに移動する必要があります。別のページ。このようなものを作成しましたが、選択したラジオボタンを与えることができません

<form action="" method="get" name="radval">
<table width="100">
<tr>
<td width="41"><input name="xyz" type="radio" id="yes_chk" value="" required>
  Yes</td>
<td width="47"><input name="xyz" type="radio" id="yes_chk" value="" required>
  No</td>

</tr>
<tr>
 <td colspan="4"><input type="submit" value="Submit" id="button"></td>
</tr>
</table></form>

JavaScript

<script src="js/jquery.reveal.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#button').click(function(e) { // Button which will activate our modal
            $('#modal').reveal({ // The item which will be opened with reveal
                animation: 'fade',                   // fade, fadeAndPop, none
                animationspeed: 600,                       // how fast animtions are
                closeonbackgroundclick: true,              // if you click background will modal close?
                dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
            });
        return false;
        });
    });
</script>

選択したラジオ ボタンに従ってページをリダイレクトするにはどうすればよいですか。私はjqueryを初めて使用しますが、何か助けはありますか?

前もって感謝します。

4

1 に答える 1

0

私はそれを少し再作成し、コメントでコードの説明を見ることができます：

HTMLを少し調整

<form action="" method="get" name="radval" data-sjaak-module="sjaak.mod.form">
        <input name="yes-no" type="radio" class="yes_chk" value="yes">Yes
        <input name="yes-no" type="radio" class="no_chk" value="no">No
        <input type="submit" value="submit" id="button">
</form>

$('#button').click(function(e) { // モーダルを有効にするボタン

e.preventDefault(); // 送信を防ぎ、下のリストをたどる
            var x = !$('.yes_chk').is(':checked'), // 変数を宣言し、チェックされていない場合はクラス yes_chk をチェックします
                y = !$('.no_chk').is(':checked')
            if (x && y) { // 両方のフィールドがチェックされていない場合の条件
                alert('選択してください'); // 選択肢がない場合にポップアップする警告ボックス
            } else if (x) { // x だけがチェックされていない場合
                var no = confirm('あなたはノーをチェックしました'); // 後で if で使用するために変数に入れます
                if(no == true) { // [OK] をクリックした場合、次のことを行います
                    parent.location='http://www.stackoverflow.com/';
                } else { // キャンセルをクリックした場合の処理
                    console.log('false');
                    parent.location='http://stackoverflow.com/questions/15197403/form-with-two-radio-buttons-using-jquery-dialogbox';
                }

            } そうしないと {
                var yes = confirm('はいにチェックを入れました');
                if(yes == true) { // 条件が満たされた場合
                    parent.location='http://www.stackoverflow.com/'; // このウェブサイトに移動
                } else { // キャンセルが押された場合、次のことを行います
                    parent.location='http://stackoverflow.com/questions/15197403/form-with-two-radio-buttons-using-jquery-dialogbox';
                }
            }


// すぐ下のコード
$('#modal').reveal({ // Reveal で開かれるアイテム
animation: 'fade', // フェード、fadeAndPop、なし
animationspeed: 600, // アニメーションの速さ
closeonbackgroundclick: true, // 背景をクリックするとモーダルが閉じますか?
Dismissmodalclass: 'close' // 開いているモーダルを閉じるボタンまたは要素のクラス
            });
        false を返します。
        });
于 2013-03-04T10:57:36.277 に答える