使用 jquery 对话框的带有两个单选按钮的表单

Question

您好，我需要创建一个带有两个单选按钮的表单，是和否带有提交按钮，如果用户没有选择任何选项，则应弹出警报说“请选择一个选项”，如果是并提交按钮，则应使用 jquery 对话框弹出对话框中的两个按钮 ok 和 cancel--> 如果用户单击 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 新手，有什么帮助吗？

提前致谢。

Answer 1

我重新创建了一下，在 cmets 中你可以看到代码解释：

您的 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) { // 如果点击确定，请执行以下操作 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' // 将关闭打开的模式的按钮或元素的类 }); 返回假； });