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 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>

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

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 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:

• CSS:
  • :checkedsélecteur .
  • Sélecteurs d'attributs CSS.
  • ~Combinateur général sibling ( ) .
• jQuery:
  • appendTo().
  • sélecteur d’attribut égal .
  • change().
  • :checkedsélecteur .
  • filter().
  • is().
  • :radiosélecteur .
  • remove().
  • text().
  • toggle().
  • val().

Essaye ça

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

Quelque chose comme ça:

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

$('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.

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

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

Essaye ça:

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

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

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");
    }
});