web-dev-qa-db-fra.com

JQuery Si le bouton radio est coché

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

J'ai ces 2 boutons radio en ce moment afin que l'utilisateur puisse décider s'il a besoin d'un affranchissement inclus dans le prix:

<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, effectuez une fonction d'ajout. Quelqu'un pourrait-il me dire comment je ferais cela s'il vous plaît?

Merci pour toute aide

modifier:

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>
jqueryhtmlradio-button
129
Daniel H
$('input:radio[name="postage"]').change(
    function(){
        if ($(this).is(':checked') && $(this).val() == 'Yes') {
            // append goes here
        }
    });

Ou, ci-dessus - encore une fois - en utilisant un peu de jQuery superflu: less:

$('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();
        }
    });


var appended = $('<div />').text("You're appendin'!");
appended.id = 'appended';
$('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/1.6.2/jquery.min.js"></script>
<input type="radio" id="postageyes" name="postage" value="Yes" />Yes
<input type="radio" id="postageno" name="postage" value="No" />No

Démo de JS Fiddle .

Et, en outre, une mise à jour modérée (puisque je modifiais pour inclure des extraits et les liens JS Fiddle), afin d’emballer les éléments <input /> avec <label>s - autoriser un clic sur le texte pour mettre à jour le <input /> correspondant - et changer le moyen de créer le 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 .

En outre, si vous devez uniquement afficher le contenu en fonction de l'élément sélectionné par l'utilisateur, une légère mise à jour va basculer la visibilité à l'aide d'un affichage/masquage 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 simplement 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:

250
David Thomas

Essaye ça

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

Quelque chose comme ça:

if($('#postageyes').is(':checked')) {
// do stuff
}
8
Mrchief
$('input:radio[name="postage"]').change(function(){
    if($(this).val() === 'Yes'){
       // append stuff
    }
});

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

6
Shef
if($('#test2').is(':checked')) {
    $(this).append('stuff');
}
5
Phil
$("input").bind('click', function(e){
   if ($(this).val() == 'Yes') {
        $("body").append('whatever');
   }
});
4
genesis

Essaye ça:

if ( jQuery('#postageyes').is(':checked') ){ ... }
3
Justin Ethier

Cela permettra d'écouter 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");
    }
});
0
M.S Shohan
jQuery('input[name="inputName"]:checked').val()
0
Benjamin