Jquery si le bouton radio est coché

possible Duplicate:

vérification du bouton radio spécifique est cochée

j'ai ces 2 boutons radio à l'heure actuelle afin que l'utilisateur peut décider s'ils ont besoin d'affranchissement 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

j'ai besoin d'utiliser Jquery pour vérifier si le " oui " bouton radio est coché, et si c'est un ajout de la fonction. Pourrait quelqu'un m'a dit comment je ferais ça s'il vous plaît?

Merci pour toute aide

edit:

j'ai mis mon code à jour, mais ça ne marche pas. Suis-je en train de faire 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>
120
demandé sur Community 2011-07-11 22:18:41

9 réponses

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

Ou, le ci-dessus - encore une fois - à l'aide d'un peu de moins "1519280920 de" superflu jQuery:

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

Révisée (amélioration de l'-certains) de jQuery:

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

js Fiddle demo .

et, de plus, une légère mise à jour (puisque je révisais pour inclure des extraits ainsi que les liens de JS Fiddle), afin d'envelopper les éléments <input /> avec <label> s-permettent de cliquer sur le texte pour mettre à jour le <input /> pertinent - et de changer le moyen de créer le contenu pour 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>

js Fiddle demo .

aussi, si vous avez seulement besoin d'afficher le contenu en fonction de l'élément vérifié par l'utilisateur, une légère mise à jour qui va basculer la visibilité en utilisant une afficher / cacher:

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

js Fiddle demo .

, les Références:

236
répondu David Thomas 2015-05-02 10:51:28

Essayez cette

if($("input:radio[name=postage]").is(":checked")){
  //Code to append goes here
}
20
répondu ShankarSangoli 2011-07-11 18:26:16

quelque chose comme ça:

if($('#postageyes').is(':checked')) {
// do stuff
}
8
répondu Mrchief 2011-07-11 18:21:11
$('input:radio[name="postage"]').change(function(){
    if($(this).val() === 'Yes'){
       // append stuff
    }
});

ceci écoutera pour un événement de changement sur les boutons radio. Lorsque l'utilisateur clique sur Yes , l'événement se déclenche et vous pourrez ajouter tout ce que vous voulez au DOM.

6
répondu Shef 2011-07-11 18:27:48
if($('#test2').is(':checked')) {
    $(this).append('stuff');
} 
5
répondu Phil 2011-07-11 18:22:52
$("input").bind('click', function(e){
   if ($(this).val() == 'Yes') {
        $("body").append('whatever');
   }
});
4
répondu genesis 2011-07-11 18:42:32

essayez ceci:

if ( jQuery('#postageyes').is(':checked') ){ ... }
3
répondu Justin Ethier 2011-07-11 18:22:15
jQuery('input[name="inputName"]:checked').val()
0
répondu Benjamin 2017-08-24 21:13:25

Ce sera à l'écoute de l'évolution de l'événement. 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
répondu M.S Shohan 2018-02-25 19:24:10