jQuery show some content on radio select

I have 2 radio button (i.e., <input type="radio">) with values "yes","no"

Now, I need to show a 2 other fields when someone selects "yes"

I understand that I need to place them in <div>, but when someone selects "yes", the开发者_StackOverflow中文版n div should show, with some highlight

I need to achieve these 2 things (that I guess): showing up the div and highlighting it for some time (for user attention).

<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>

Does anyone know how to achieve this?

Thanks

My solution uses both jQuery and jQueryUI...

Working example: http://jsfiddle.net/Damien_at_SF/gBedF/

Basically I assign a function to the change event of the radio button group. This tests if the radio button is yes or no (based on values).

If yes, we fade in the hidden div and fade out the background color (jQueryUI) after a delay of 500 milliseconds.

If the value of the radio button is no, we reset the background color and hide the div.

HTML: (note I have given both input elements the same 'name' attribute so that they are in a group.)

<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);
    } 
});

With 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();
    }
});

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

There are some problems with your HTML, first you will need to give each of your radio buttons the same name attribute. Also you have duplicate id attributes for both radios which must be changed or removed. In addition there is not need to capitalise the radio button values:

<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>

Now the HTML is valid, we can look out for changes in the values of either radio button. It is important to remember that both radio buttons change when you select one, so you must check within the binding to the change event that this.checked is true to disregard the deselected radio button.

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();
        }
    }
});

In order to slowly removed the highlight colour of the div, I have used the jQuery color plugin which is necessary for the animate({backgroundColor: 'transparent'}, 2000) line.

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