Jquery Si le bouton radio est coché


150

Dupliquer possible: la
vérification du bouton radio spécifique est cochée

J'ai ces 2 boutons radio pour le moment afin que l'utilisateur puisse décider s'il a besoin de frais de port inclus dans le prix ou non:

<input type="radio" id="postageyes" name="postage" value="Yes" /> Yes
<input type="radio" id="postageno" name="postage" value="No" /> No

Je dois utiliser Jquery pour vérifier si le bouton radio «oui» est coché, et si c'est le cas, faire une fonction d'ajout. Quelqu'un pourrait-il me dire comment je ferais cela s'il vous plaît?

Merci pour toute aide

Éditer:

J'ai mis à jour mon code pour cela, mais cela ne fonctionne pas. Est-ce que je fais quelque chose de mal?

<script type='text/javascript'>
// <![CDATA[
jQuery(document).ready(function(){

$('input:radio[name="postage"]').change(function(){
    if($(this).val() == 'Yes'){
       alert("test");
    }
});

});

// ]]>
</script>

1
@Daniel H: Sur votre mise à jour: ça marche très bien !
Shef le

C'est étrange, cela ne fonctionne tout simplement pas sur mon site Web. Au moins, je sais que le code est correct, je vais essayer de trouver ce qui ne va pas, merci pour toutes les réponses!
Daniel H du

Réponses:


285
$('input:radio[name="postage"]').change(
    function(){
        if ($(this).is(':checked') && $(this).val() == 'Yes') {
            // append goes here
        }
    });

Ou, ce qui précède - encore une fois - en utilisant un jQuery un peu moins superflu:

$('input:radio[name="postage"]').change(
    function(){
        if (this.checked && this.value == 'Yes') {
            // note that, as per comments, the 'changed'
            // <input> will *always* be checked, as the change
            // event only fires on checking an <input>, not
            // on un-checking it.
            // append goes here
        }
    });

JQuery révisé (amélioré-certains):

// defines a div element with the text "You're appendin'!"
// assigns that div to the variable 'appended'
var appended = $('<div />').text("You're appendin'!");

// assigns the 'id' of "appended" to the 'appended' element
appended.id = 'appended';

// 1. selects '<input type="radio" />' elements with the 'name' attribute of 'postage'
// 2. assigns the onChange/onchange event handler
$('input:radio[name="postage"]').change(
    function(){

        // checks that the clicked radio button is the one of value 'Yes'
        // the value of the element is the one that's checked (as noted by @shef in comments)
        if ($(this).val() == 'Yes') {

            // appends the 'appended' element to the 'body' tag
            $(appended).appendTo('body');
        }
        else {

            // if it's the 'No' button removes the 'appended' element.
            $(appended).remove();
        }
    });

Démo de JS Fiddle .

Et, en outre, une légère mise à jour (puisque je modifiais pour inclure des extraits ainsi que les liens JS Fiddle), afin d'envelopper les <input />éléments avec <label>s - permettre de cliquer sur le texte pour mettre à jour le pertinent <input />- et de changer les moyens de création du contenu à ajouter:

var appended = $('<div />', {
  'id': 'appended',
  'text': 'Appended content'
});
$('input:radio[name="postage"]').change(function() {
  if ($(this).val() == 'Yes') {
    $(appended).appendTo('body');
  } else {
    $(appended).remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
  <input type="radio" id="postageno" name="postage" value="No" />No</label>

Démo de JS Fiddle .

De plus, si vous avez seulement besoin d'afficher du contenu en fonction de l'élément vérifié par l'utilisateur, une légère mise à jour qui fera basculer la visibilité à l'aide d'un show / hide explicite:

// caching a reference to the dependant/conditional content:
var conditionalContent = $('#conditional'),
    // caching a reference to the group of inputs, since we're using that
    // same group twice:
    group = $('input[type=radio][name=postage]');

// binding the change event-handler:
group.change(function() {
  // toggling the visibility of the conditionalContent, which will
  // be shown if the assessment returns true and hidden otherwise:
  conditionalContent.toggle(group.filter(':checked').val() === 'Yes');
  // triggering the change event on the group, to appropriately show/hide
  // the conditionalContent on page-load/DOM-ready:
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" id="postageyes" name="postage" value="Yes" />Yes</label>
<label>
  <input type="radio" id="postageno" name="postage" value="No" />No</label>
<div id="conditional">
  <p>This should only show when the 'Yes' radio &lt;input&gt; element is checked.</p>
</div>

Et, enfin, en utilisant uniquement CSS:

/* setting the default of the conditionally-displayed content
to hidden: */
#conditional {
  display: none;
}

/* if the #postageyes element is checked then the general sibling of
that element, with the id of 'conditional', will be shown: */
#postageyes:checked ~ #conditional {
  display: block;
}
<!-- note that the <input> elements are now not wrapped in the <label> elements,
in order that the #conditional element is a (subsequent) sibling of the radio
<input> elements: -->
<input type="radio" id="postageyes" name="postage" value="Yes" />
<label for="postageyes">Yes</label>
<input type="radio" id="postageno" name="postage" value="No" />
<label for="postageno">No</label>
<div id="conditional">
  <p>This should only show when the 'Yes' radio &lt;input&gt; element is checked.</p>
</div>

Démo de JS Fiddle .

Références:


3
Inutile de voir si elle est cochée ou non. Il n'aura jamais de valeur autrement. Gaspillage de ressources!
Shef

22

Essaye ça

if($("input:radio[name=postage]").is(":checked")){
  //Code to append goes here
}

13

Quelque chose comme ça:

if($('#postageyes').is(':checked')) {
// do stuff
}

3
L'objet jQuery est toujours véridique. Vous voudrez peut-être utiliser à la $(...).lengthplace.
pimvdb

Tu veux dire #postageyes:checkedou $('#postageyes').is(':checked')?
Shef le

@pimvdb Selon la documentation jQuery,is() renvoie un booléen. Donc l'appel .length()est cassé. Extrait de la documentation: "Contrairement aux autres méthodes de filtrage, .is () ne crée pas de nouvel objet jQuery. Au lieu de cela, il vous permet de tester le contenu d'un objet jQuery sans modification." - api.jquery.com/is
Asaph

7
$('input:radio[name="postage"]').change(function(){
    if($(this).val() === 'Yes'){
       // append stuff
    }
});

Cela écoutera un événement de changement sur les boutons radio. Au moment où l'utilisateur clique Yes, l'événement se déclenche et vous pourrez ajouter tout ce que vous voulez au DOM.


6
if($('#test2').is(':checked')) {
    $(this).append('stuff');
} 

4
$("input").bind('click', function(e){
   if ($(this).val() == 'Yes') {
        $("body").append('whatever');
   }
});

Vous n'êtes pas trop sûr de cela, mais ne reviendra pas $("#postageyes:checked"toujours vrai? N'auriez-vous pas besoin d'utiliser le .lengthpour que cela fonctionne?
Phil

supprimé "ou" et tout ce qui suit
genesis


0
jQuery('input[name="inputName"]:checked').val()

Bien que cet extrait de code puisse résoudre la question, inclure une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Patrick Hund

Je l'ai. La prochaine réponse en aura un.
Benjamin

0

Cela écoutera l'événement modifié. J'ai essayé les réponses des autres mais celles-ci n'ont pas fonctionné pour moi et finalement, celle-ci a fonctionné.

$('input:radio[name="postage"]').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.