2012-12-30 122 views
0

我想顯示根據選定的單選按鈕隱藏的DIV,例如:顯示隱藏的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".option_select").click(function() { 
      if ($('#extra_options').is(":hidden")) { 
       $('#extra_options').slideDown("slow"); 
      }  
     }); 
    }); 
</script>   
</head> 

<body> 
<div id="extra_options" style="display:none;"> 
<input type="radio" name="ExtraOption" value="1" /> Extra option 1<br /> 
<input type="radio" name="ExtraOption" value="2" /> Extra option 2<br /> 
<input type="radio" name="ExtraOption" value="3" /> Extra option 3<br /> 
</div> 

<form action="#" method="post"> 
<input type="radio" name="Option" class="option_select" value="1" /> Option 1<br /> 
<input type="radio" name="Option" class="option_select" value="2" /> Option 2<br /> 
<input type="radio" name="Option" class="option_select" value="3" /> Option 3<br /> 
<input type="submit" name="submit" value="Submit" /> 
</form> 
</body> 
</html> 

但我很想說#extra_options DIV附加到所選無線電按鈕(「選項1,選項2,選項3等),所以它看起來更像是」這些額外的選項與這個選項#「。我想我可以有一個#extra_optionsX div附加到每一個單選按鈕,但我覺得那裏是任何創意?

tia

+0

建議你創建的標記和CSS的方式,你希望它看起來和創造jsfiddle.net現場演示。您可以根據需要多次克隆'extra_options',並使它們與實例無關。全部取決於你正在尋找什麼行爲 – charlietfl

回答

1

你可以(:添加隱藏/改變所選擇的選項時表示編輯)

+0

謝謝,這工作得很好。出於某種原因,如果我做$(this).next()。after($('#extra_options'));在ajax調用的成功函數中,它不起作用(它保留在所有選項之上),但是如果我在ajax之前設置它,那麼它確實有效。奇怪,但至少它的作品,謝謝! – Analog

0

一個工作碼是here使用

if ($('#extra_options').is(":visible")) { 
    $('#extra_options').hide(); 
} 
$(this).next().after($('#extra_options')); 
$('#extra_options').slideDown("slow"); 

其追加。

$(document).ready(function() { 
    $('form > input').click(function(){ 
     var t = $(this), 
      extra = $('#extra_options'); 

     $('input[value=' + t.val() + ']', extra) 
      .parent() 
      .show() 
      .siblings() 
      .hide(); 

    }); 
});​ 

更好的包裹在<label>文本所有輸入,是這樣的:<label><input type="radio" name="foo" value="bar" /> Its value here </label>

+0

感謝您的建議,我將添加標籤標籤。我想嘗試一下,但它並沒有像我想要的那樣工作,它一直在頂部顯示額外的選項,高於所有其他選項,而不是在section選項下方(在jsfiddle.net中也是如此) – Analog