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/