2013-07-08 30 views
0

我有2套單選按鈕,這是我要做到以下幾點:。選擇不同的單選按鈕進入不同的html頁面

1)當所有的選擇都是假的,顯示的驗證消息(這是工作,但點擊時'重複保存'它會添加一個空行,我該如何防止這一點?)。

2)如果只選擇設置1或設置2,則顯示保存時的錯誤消息。 3)。當選擇Set 1時,Set 2選擇需要根據是或否將用戶帶到不同的頁面。

在此先感謝!

Link to 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.     
     } 
    } 
}); 

回答

1

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 />嗎?我添加了淡入/淡出以避免這種情況。希望它可以。

+0

我有
之後的錯誤消息,所以它顯示在一個單獨的行,雖然我喜歡fadeOut。 我會盡力解釋我需要這樣做。 如果選擇無線電臺1或無線電臺2,則同時顯示val1和val2。 如果選擇了收音機1並且收音機2不是,只顯示val2。 如果選擇Radio Set 2並且Radio Set 1不是,則只顯示val1。 如果選擇了無線電套裝1並選擇了無線電套裝2> attachYes,請前往cnn.com。 如果選擇了收音機1並選擇收音機2> attachNo,請轉至yahoo.com。 – squirc77

+0

@ squirc77,好吧,我明白了。在我的演示中,我將它們添加到html中,所以點擊後它們不會很多。你也可以用CSS來設計它們。讓我知道你是否需要幫助。 – Sergio

+0

@ squirc77,這是CSS的錯誤消息的另一種選擇http://jsfiddle.net/bkSrD/1/ – Sergio

相關問題