Afficher la zone de texte basée sur la sélection RadioButton ou valeur lorsque la page charges

Question

Donc quand je charge une page que je récupère les informations d'un DB et vérifierai un bouton radio en fonction de sa valeur ...

J'ai besoin des zones de texte pour afficher en premier - en fonction de l'être radiobutton déjà vérifié

fonctionne très bien quand je réalise l'événement click, mais je dois montrer les zones de texte lorsque la page se charge parce que le 1er RadioButton est vérifiée à partir du DB ...

<p> 
    Show textboxes <input type="radio" name="radio1" value="Show" checked="checked"> 
    Do nothing <input type="radio" name="radio1" value="Nothing"> 
    </p> 

    Wonderful textboxes: 

    <div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div> 

    <div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div> 

Voici mon FIDDLE - DEMO http://jsfiddle.net/rbla/5fq8q2bj/

ici est le jquery à l'aide bascule

$(document).ready(function() { 
    $(".text").hide() 
    $('[name=radio1]').on('change', function(){ 
     $('.text').toggle(this.value === 'Show'); 
    }).trigger('change'); 
}); 

idées ...

Answer 1

La raison pour laquelle votre solution ne fonctionne pas est parce que vous allez à travers toutes vos entrées de radio et de l'élément puis faire basculer sur la base de sa valeur — , qu'elle soit cochée ou non. Donc, lors de l'exécution, c'est ce que votre script fait:

1. rencontre le premier élément de la radio, déclenche l'événement onchange, déclenche le rappel onchange, et montre l'élément .text
2. rencontre le deuxième élément radio, déclenche l'événement onchange, les incendies onchange rappel, et se cache l'élément .text à nouveau

Si vous mettez un journal de la console dans votre rappel, vous réalisé que l'élément .text est affichée et cachée dans une succession rapide.

Ce que vous voulez vraiment faire est seulement d'effectuer le basculement quand il est coché. Par conséquent, votre exemple fonctionnera en appliquant simplement un chèque qui est this.checked truthy avant d'effectuer le basculement:

$('[name=radio1]').on('change', function() { 
    if (this.checked) { 
    $('.text').toggle(this.value === 'Show'); 
    } 
}).trigger('change'); 

Voir exemple ci-dessous travail:

$(document).ready(function() { 
 
    $(".text").hide() 
 
    $('[name=radio1]').on('change', function() { 
 
    if (this.checked) { 
 
     $('.text').toggle(this.value === 'Show'); 
 
    } 
 
    }).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    Show textboxes 
 
    <input type="radio" name="radio1" value="Show" checked="checked"> Do nothing 
 
    <input type="radio" name="radio1" value="Nothing"> 
 
</p> 
 

 
Wonderful textboxes: 
 

 
<div class="text"> 
 
    <p>Textbox #1 
 
    <input type="text" name="text1" id="text1" maxlength="30"> 
 
    </p> 
 
</div> 
 
<div class="text"> 
 
    <p>Textbox #2 
 
    <input type="text" name="text2" id="text2" maxlength="30"> 
 
    </p> 
 
</div>