jQuery的顯示在無線電某些內容選擇

Question

我有2的單選按鈕（即，< INPUT TYPE =「無線電」 >）與值「是」，「否」

現在，我需要顯示一個2個領域當有人選擇了「是」

我明白，我需要將它們放在<DIV>，但是當有人選擇「是」，那麼DIV應顯示，有一些亮點

我需要實現這2種東西（我猜）：顯示div並突出顯示它一段時間（供用戶關注）。

<input type="radio" id="dl" value="YES" />Yes 
<input type="radio" id="dl" value="NO" checked />No 

<div id="dlyes"><label>Number</label><input type="text" id="dlno" /></div> 

有誰知道如何做到這一點？

感謝

Answer 1

我的解決方案同時使用jQuery和jQueryUI的...

工作例如：http://jsfiddle.net/Damien_at_SF/gBedF/

基本上，我一個函數分配給該更改單選按鈕組的事件。這將測試單選按鈕是或否（基於值）。

如果是的話，我們淡入隱藏的div並在延遲500毫秒後淡出背景顏色（jQueryUI）。

如果單選按鈕的值爲否，我們重置背景顏色並隱藏div。

HTML：（注意我已經給兩個輸入元素相同的 'name' 屬性，使他們在一組。）

<input type="radio" id="dl" value="YES" name="yesno" />Yes 
<input type="radio" id="dl" value="NO" name="yesno" checked />No 
<div id="dlyes"><label>Number</label><input type="text" id="dlno" /></div> 

CSS：

#dlyes {  
    display:none; 
    background-color:#efefef; 
    width:400px; 
    height:400px; 
    margin-top:20px;   
} 

Javascript：

$('input[name|="yesno"]').change(function() { 
    if($(this).val()=='YES') { 
     $('#dlyes').fadeIn(0, function() { 
      $(this).delay(500).animate({ backgroundColor: "white" }, 1000); 
     }); 
    } else { 
     $('#dlyes').css('background-color', '#efefef'); 
     $('#dlyes').fadeOut(0); 
    } 
}); 

Answer 2

使用jQuery：

var div = $("#dlyes"); 
$("input:radio").click(funciton(){ 
    var radioVal = this.value; 
    if(radioVal === "YES"){ 
     div.show(); 
     div.css({border: "solid 1px red"}); 
     setTimeout(function(){div.css({border: "none"});}, 5000); 
    } 
    else { 
     div.hide(); 
    } 
}); 

Answer 3

DEMO：http://jsfiddle.net/marcuswhybrow/T9f8F/

有一些問題，你的HTML，首先你需要給每個單選按鈕相同name屬性。你也有重複的id屬性的兩個無線電必須改變或刪除。此外，還有沒有需要把握的單選按鈕值：

<label><input type="radio" name="myradios" value="yes"> Yes</label> 
<label><input type="radio" name="myradios" value="no" checked /> No</label> 

<div id="dlyes"> 
    <label>Number</label><input type="text" id="dlno" /> 
</div> 

現在的HTML是有效的，我們可以看出來在任一單選按鈕的值的變化。請務必記住，當您選擇一個單選按鈕時，兩個單選按鈕都會發生變化，因此您必須在綁定change事件時檢查this.checked爲真，以忽略取消選中的單選按鈕。

var $div = $('#dlyes'); 
// Hide the div using jQuery rather than CSS, as if JavaScirpt is disabled 
// the user should still be able to access the inputs. 
$div.hide(); 

$('input:radio[name="myradios"]').change(function() { 
    if (this.checked) { 
     if (this.value == 'yes') { 
      $div.show() 
       .css('background-color', '#FFD700') 
       .animate({'background-color': 'transparent'}, 1000); 
     } else { 
      $div.hide(); 
     } 
    } 
}); 

爲了去除緩慢的div高亮顏色，我已經使用了jQuery color plugin這是必要的animate({backgroundColor: 'transparent'}, 2000)線。

DEMO：http://jsfiddle.net/marcuswhybrow/T9f8F/