fadeIn and fade out in jquery?

Question

I want to use .fadeIn() , .fadeOut() for two different function in the same jQuery.

For Example: Imagine a form

assume the below is radiobuttons:

O U.S - if i choose U.S it fadeIn - cities/ province in U.S O Canada.- If i choose Canada it fadeIn - cities/ province in U.S

another radiobutton: // there is no relation between this and the above radiobutton (US, Canada)

O Male - it should fadeIn pub, bar etc O Female- it should fadeIn mall , spa etc

how can i do in jquery?

Answer 1

jsFiddle Demo

If i understood well, this should match your need.

HTML

    <input type="checkbox" id="group1Switch" value="group1" /><label for="group1Switch">group 1</label>
&nbsp;&nbsp;&nbsp;
<input type="checkbox" id="group2Switch" value="group2" /><label for="group2Switch">group 2</label>
<br /><br />
<input type="radio" name="fieldSwitch" id="type1Switch" value="type1" /><label for="type1Switch">type 1</label>
&nbsp;&nbsp;&nbsp;
<input type="radio" name="fieldSwitch" id="type1Switch" value="type2" /><label for="type1Switch">type 2</label>

<br /><br />

<fieldset id="group1">
    <legend>Group 1</legend>
    type 1 <input type="text" class="type1" />
    <br />
    type 2 <input type="text" class="type2" />
</fieldset>
<fieldset id="group2">
    <legend>Group 2</legend>
    type 1 <input type="text" class="type1" />
    <br />
    type 2 <input type="text" class="type2" />
</fieldset>

jQuery

$('input[type=checkbox]').click(function(){
    var _this = $(this);

    if( _this.is(':checked') ){
        $('#' + _this.val() ).fadeIn();
    } else {
        $('#' + _this.val() ).fadeOut();
    }
});


$('input[type=radio]').click(function(){
    var _this = $(this);

    $('fieldset input.' + _this.val() ).fadeIn();
    $('fieldset input:not(.' + _this.val() +')' ).fadeOut();
});