Question

我有2个单选按钮（即＆lt; input type =“radio”＆gt;），其值为“yes”，“no”

现在，当有人选择“是”

时，我需要显示另外两个字段

我知道我需要将它们放在＆lt; div＆gt;中，但是当有人选择“是”时，div应显示，并带有一些亮点

我需要实现这两件事（我猜）：显示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/

基本上我将一个函数分配给单选按钮组的change事件。这将测试单选按钮是“是”还是“否”（基于值）。

如果是，我们淡入隐藏的div并在延迟500毫秒后淡出背景颜色（jQueryUI）。

如果单选按钮的值为no，我们重置背景颜色并隐藏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的高亮颜色，我使用了animate({backgroundColor: 'transparent'}, 2000)行所需的jQuery color plugin。

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

jQuery在无线电选择上显示一些内容

3 个答案: