2013-01-23 25 views
1

在HTML腳本需要一個小的修改那朵我的代碼使用JavaScript,即時通訊無法理清

<div class="rButtons"> 
<input type="radio" name="numbers" value="10" onclick="uncheck();" />10 
<input type="radio" name="numbers" value="20" onclick="uncheck();" />20 
<input type="radio" name="numbers" value="other" onclick="check(this);"/>other 
<input type="text" id="other_field" name="other_field" onblur="checktext(this);"/> 
</div> 

這是CSS代碼

<style type="text/css"> 
#other_field 
{ 
visibility: hidden; 
} 
</style> 

這是JS

<script type="text/javascript"> 
function uncheck() 
{ 
    document.getElementById('other_field').style.visibility = "hidden"; 
} 
function check(inputField) 
{ 
    if(inputField.checked) 
    { 
     document.getElementById('other_field').style.visibility = "visible"; 
    } 
} 
function checktext(inputField) 
{ 
    if(isNaN(inputField.value)) 
    { 
     alert('only numbers are allowed..'); 
     return false; 
    } 
    else if((inputField.value % 10) != 0) 
    { 
     alert('only multiples of 10..'); 
     return false; 
    } 
    else 
    { 
     return true; 
    } 

} 
</script> 

一切都很好.. 但問題是這個..當我點擊「其他」單選按鈕它打開了一個新的空白字段,但是當ñ我點擊回到10或20它停留在那裏..我如何使這消失??

我知道答案很簡單..但我嘗試過很多事情,但沒有工作..

感謝

+0

你能撥弄嗎? – marekful

+1

這已經適用於Chrome和Firefox。這是[jsFiddle](http://jsfiddle.net/gDxqj/)。您是否在某個瀏覽器中看到此問題?您的網頁上可能存在額外的代碼,可能會導致問題,因此您可能會發布顯示問題的小提琴。 –

+0

@Marc Baumbach這也適用於我..也只是一個主要的小故障..感謝所有 – Swati

回答

0

你可以用jQuery做到這一點的更多simples這樣

<script> 
var $radios = $('input:radio[name=numbers]'); 
     if ($radios.is(':checked') === true) { 
      $("#other_field").show(); 
     }  
     else 
     { 
      $("#other_field").hide(); 
     } 

</script> 
+0

我有jquery-1.4.2.js ..將你的代碼工作呢? – Swati

+0

是的,只是把在函數和「平變化」單選按鈕的,調用它或把它的文件準備嘗試;) –

+0

我想什麼ü說.. 和我打電話這樣 其他 但沒有工作.. – Swati

0

全碼對你來說:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2"></script> 

<script type="text/javascript"> 

    function ShowTextBox() 
    { 
     if ($("input[name=radiobutton1]:checked").val() == "show")  
     {  
      $("#text_box_to_show").show(); 
     }  
     else 
     { 
      $("#text_box_to_show").hide(); 
     } 
    } 

</script> 
</head> 

<body> 
<h3>Example</h3> 
    <input name="radiobutton1" type="radio" value="show" onChange="ShowTextBox();">Show 
    <input name="radiobutton1" type="radio" value="hide" checked onChange="ShowTextBox();">Hide 
    <input type="text" id="text_box_to_show" name="textfield" style="display:none;"> 
</body> 
</html>