Generalizar eventos do campo no formulário usando Jquery

[Fagner Moraes 0]

Tenho um formulário com dois INPUT's do tipo RADIO e um INPUT do tipo text (oculto) , e esse quando seleciono a opção "sim" ele mostra um campo texto, se seleciono "não" ele volta a ocultar o campo texto.

 

Código html:

<div class="CampoEscondido">
    <input type="radio" class="Escolha" name="campo01" value="sim" />SIM
    <input type="radio" class="Escolha" name="campo01" value="nao" />NAO

    <input type=text name="campoNome" class="ocultar" />
</div>

código Jquery:

$(document).ready(function () {

    $('.ocultar').hide();

    $('.Escolha').change(function () {

        if (this.value == "sim") {
            $('.ocultar').show();


        } else {
            $('.ocultar').hide();
        }
    });

});

Queria uma ajuda para generalizar o Jquery para poder usar mais campos desse tipo com essa função sem precisar criar uma nova função em Jquery para um segundo campo..

 

Consegui passar meu problema com clareza?

 

[Snowden 94]

$.fn.radio = function( elemShow ){

this.change(function(){

if( this.value == 'sim' ){

$(elemShow).show();

}

if( this.value == 'nao' ){

$(elemShow).hide();

}

});

};

 

$('.Escolha1').radio('input[name="campoNome1"]');

$('.Escolha2').radio('input[name="campoNome2"]');

...

<!-- ESCOLHA 1 -->

<div class="CampoEscondido">

<input type="radio" class="Escolha1" name="campo01" value="sim" />SIM

<input type="radio" class="Escolha1" name="campo01" value="nao" />NAO

<input type="text" name="campoNome1" style="display:none"/>

</div>

<hr />

<!-- ESCOLHA 2 -->

<div class="CampoEscondido">

<input type="radio" class="Escolha2" name="campo01" value="sim" />SIM

<input type="radio" class="Escolha2" name="campo01" value="nao" />NAO

<input type="text" name="campoNome2" style="display:none"/>

</div>

<!-- ESCOLHA 3 -->

...

[Fagner Moraes 0]

Obrigado mesmo hugo!

[William Bruno 1501]

Apenas para completar, não precisa transformar em plugin.. pode só usar um fato muito interessante da linguagem.

 

var radio = function () {
        if ($(this).val() === "sim") {
            $('.ocultar').show();
        } else {
            $('.ocultar').hide();
        }
};
$(document).ready(function () {
    $('.ocultar').hide();

    $('.Escolha').change(radio);
    $('.OutraEscolha').on('change', radio);
    $('.MaisOutraEscolha').on('change', radio);
});

[Fagner Moraes 0]

William estou testando sua solução mas não obtive o resultado que era esperado.

 

O código que estou usando é...

 

Código HTML:

<div class="CampoEscondido">
    <input type="radio" class="Escolha" name="campo01" value="sim" />SIM
    <input type="radio" class="Escolha" name="campo01" value="nao" />NAO
    <input type="text" name="campo01" class="ocultar" />

    <input type="radio" class="OutraEscolha" name="campo02" value="sim" />SIM
    <input type="radio" class="OutraEscolha" name="campo02" value="nao" />NAO
    <input type="text" name="campo02" class="ocultar" />
</div> 

Código Jquery :

var radio = function () {
        if ($(this).val() === "sim") {
            $('.ocultar').show();
        } else {
            $('.ocultar').hide();
        }
    };
    $(document).ready(function () {
        $('.ocultar').hide();

        $('.Escolha').change(radio);
        $('.OutraEscolha').on('change', radio);
        $('.MaisOutraEscolha').on('change', radio);
    });

Outro Detalhe estou usando ASP.NET MVC 4

 

então tem @Scripts.Render("~/bundles/jquery")

para chamar as bibliotecas Jquery.