选择不同的单选按钮将转到不同的html页面 [英] Selecting different radio buttons goes to different html pages

问题描述

我有2组单选按钮，我想执行以下操作:

I have 2 sets of radio buttons which I want to do the following:

1)如果所有选择都不正确，则显示验证消息.(这是可行的，但是当反复单击保存"时，它会添加一个空白行，如何防止这种情况发生?)

1) When all selections are false, show validation messages.(This is working but when clicking 'Save' repeatedly it adds a blank row, how do I prevent this?).

2)如果仅选择Set 1或Set 2，则在Save上显示另一个的错误消息.

2) If just Set 1 or Set 2 is selected show error message for the other on Save.

3).选择设置1"后，需要根据是"或否"将设置2的选择带到不同的页面.

3). When Set 1 is selected, Set 2 selections need to take user to different pages depending on Yes or No.

提前谢谢！

链接到jsfiddle

<span id="val1" style="display:none; color:red;"> Please make a selection</span> 
<strong>Radio Set 3</strong>

<input type="radio" name="radio" id="attachYes" />Yes &nbsp;
<input type="radio" name="radio" id="attachNo" />
<label for="radio2">No</label>
<p> 
    <span id="val2" style="display:none; color:red;"> Please make a selection</span><strong>Radio Set 2</strong>
    <input type="radio" name="radio2" id="NotifYes" />Yes &nbsp;
    <input type="radio" name="radio2" id="NotifNo" />No
</p>
<p>
    <a href="#" id="Qbtn">Save</a>
</p>

JS

$('#Qbtn').click(function () {
    if ((!$('#attachYes').attr('checked') === true) && (!$('#attachNo').attr('checked') === true) && (!$('#NotifYes').attr('checked') === true) && (!$('#NotifNo').attr('checked')) === true) {
        //the validations are displaying correctly
        $('#val1').show().append('<br>');
        $('#val2').show().append('<br>');
    } else {
        if (($('#attachYes').attr('checked') === true) || ($('#attachNo').attr('checked') === true) && (!$('#NotifNo').attr('checked') === true) && ($('#NotifYes').attr('checked')) === true) {
            //the user should be taken to page1.html when clicking save and it isn't doing it                  
            window.location = "page1.html";

            //then how do I write if either of radio set 1 is true and #NotifNo of Radio set 2 is true go to page2.html.                
        }
    }
});

推荐答案

此处演示

Demo here

尝试一下:

$('#Qbtn').click(function () {
    if ($('#attachYes').prop('checked') && $('#NotifYes').prop('checked')) {
        //go to http://www.yahoo.com         
        window.location = "http://www.yahoo.com";
    } else if ($('#attachYes').prop('checked') && $('#NotifNo').prop('checked')) { 
        //go to http://www.cnn.com                  
        window.location = "http://www.cnn.com";
    } else {
        //the validations are displaying correctly
        $('#val1, #val2').fadeOut('fast', function () {
            $(this).fadeIn('slow');
        });
    }
});

如果我正确理解您的问题，那么此操作就可以满足您的需求.您是否真的要在每个错误上添加<br />?为了避免这种情况，我添加了淡入/淡出功能.希望一切顺利.

This does what you need, if I understood your question right. Do you really want to add <br /> on every error? I added a fade in/out to avoid that. Hope its ok.

这篇关于选择不同的单选按钮将转到不同的html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！