Bouton radio "Select" Basculer le numéro

Question

J'essaye de faire un script très très simple qui vérifie si une certaine option de bouton radio est cliquée, et si oui, montre un autre ensemble de champs (cela fonctionne très bien), mais si vous désélectionnez cette option bouton radio, il cache l'ensemble supplémentaire de champs (apparemment simple, mais ne fonctionne pas pour moi!)

Aussi je suis nouveau à JS/JQuery donc déboguer cela a été un combat! Merci pour toute aide :)

Mon bouton radio HTML qui déclenche l'affichage des champs - imaginez qu'il y a 6 autres options de bouton radio avec ceci (chacune étant classée avec [class = "otherFund"]).

<input type="radio" name="ItemName1" id="Relief1" value="Daughters of Penelope Charitable Relief Fund" onclick="set_item('DOP-Relief-Fund', 8)" onchange="relief_fund_handler()" /> 

Voici le texte et sur le terrain et je veux passer avec la sélection de bouton ci-dessus

<p id="Earmark1" style="display: none;"> 
    <strong>Please designate below what relief fund you would like your <em>DOP Charitable Relief</em> donation to go towards (see bulleted examples above).</strong><br /> 
    <strong>Earmarked for <span class="required">*</span>:</strong><input type="text" name="Earmark1" id="Earmark1" size="50" /> 
</p> 

Et voici mes tentatives de JS ...

Tentative 1:

function relief_fund_handler() { 

    var relief_elem = document.getElementById("Relief1"), 
     earmark_elem = document.getElementById("Earmark1"), 
     donate_elem = document.getElementById("ItemName1"); 

    if (relief_elem.checked) { 
     earmark_elem.setAttribute("style", "display: inline;");  
    } else if (".otherFund".checked) {   
     earmark_elem.setAttribute("style", "display: none;"); 
    } 
} 

tentative 2:

function relief_fund_handler() { 

    var relief_elem = document.getElementById("Relief1"), 
     earmark_elem = document.getElementById("Earmark1"), 
     donate_elem = document.getElementById("ItemName1"); 

    if (relief_elem.checked) { 
     earmark_elem.setAttribute("style", "display: inline;");  
    } else { 
     earmark_elem.setAttribute("style", "display: none;"); 
    } 
} 

tentative 3:

$("#Relief1:checked")( 
    function() { 
     $('#Earmark1').toggle(); 
    } 
); 

sur la tentative # 3, j'ai également remplacé le :checked avec .click, .select, .change et aucun n'a travaillé ... Merci pour toute aide! :)

Answer 1

si vous utilisez déjà jQuery, ceci est simple en utilisant .show() et .hide():

$('#Relief1').on('change',function() { 
    if($(this).is(':checked')) { 
    $('#Earmark1').show(); 
    } else { 
    $('#Earmark1').hide(); 
    } 
}); 

exemple violon: http://jsfiddle.net/x4meB/

également noter, ne pas utiliser de double d'identité, ils sont destinés à être unique (dans ce cas, vous avez un dulpicate #Earmark1 pour la balise p et la durée). Aussi, dans le violon d'exemple, je l'ai changé à une case à cocher au lieu d'une radio puisque vous ne pouvez pas décocher une radio s'il n'y a qu'une seule option.

Answer 2

Essayez ceci:

$("input.otherFund").change(function() { 
    $('#Earmark1').toggle($(this).attr('id') == 'Relief1'); 
});​ 

Answer 3

Essayez de supprimer tous les événements hors du bouton radio comme ceci:

<input type="radio" name="ItemName1" id="Relief1" value="Daughters of Penelope Charitable Relief Fund" /> 

Et en utilisant le script jquery suivant:

​$(function(){ 
    $("#Relief1").change(function(){ 
     $(this).is(":checked") ? $("#Earmark1").show() : $("#Earmark1").hide(); 
    }); 
});​ 

Answer 4

Essayez:

<script> 
var r=$('input[name="ItemName1"]).is(:checked); 
if(r) 
{ 
alert("Item is checked");//replace with any code 
} 
</script> 

Answer 5

Vous pouvez parcourir chaque bouton radio et attribuer un gestionnaire d'événements à chaque bouton radio, de sorte que lorsqu'elle est sélectionnée, il montre les autres champs et quand décochée il masque les autres champs. Le code ci-dessous peut vous aider à trouver la bonne réponse.

// Iterate the radio buttons and assign an event listener 

$('input[name="ItemName1"]').each(function() { 

    // Click Handler 

    $(this).live('click', function() { 

     // Check for selected 

     if ($(this).is(':checked')) 
     { 
      $('#EarMark1').show(); 
     } 
     else 
     { 
      $('#EarMark1').hide(); 
     } 
    }); 

}); 

Ce n'est pas parfait, ce n'est pas la solution la plus élégante. Avec quelques ajustements, cela devrait vous orienter dans la bonne direction.

Answer 6

merci à tout le monde !!! J'ai fini par utiliser l'exemple de kennypu - le ": checked" semblait fonctionner correctement même s'il s'agit d'un bouton radio. J'ai dû faire quelques ajustements, et a fini avec 2 fonctions séparées au lieu du "else". Pour une raison quelconque, les autres exemples ne fonctionnaient pas pour moi - bien que je doute fortement que cela ait à voir avec votre code, et a probablement à voir avec d'autres choses qui se passent dans la page. Puisque nous utilisons un gestionnaire de formulaire/base de données externe, nous devons conserver les événements et autres codes là-bas.

est ici ce qui a fini par travailler ..

$(function(){ 
    $("#Relief1").change(function(){ 
    if($(this).is(":checked")) { 
     $("#Earmark1").show(); 
     } 
     }); 
    }); 

    $(function(){ 
    $("#Radio1, #Radio2, #Radio3, #Radio4, #Radio5, #Radio6, #Radio7").change(function(){ 
    if($(this).is(":checked")) { 
     $("#Earmark1").hide(); 
     } 
     }); 
    }); 

Jolie maladroites, mais je l'ai eu à travailler la façon dont je avais besoin. Merci à tous ceux qui ont contribué, ça m'a beaucoup aidé.