type - Jquery Si el botón de opción está marcado

radio button is checked jquery

Question

Posible duplicado:
La verificación del botón de opción específico está marcada

Tengo estos 2 botones de opción en este momento para que el usuario pueda decidir si necesita el franqueo incluido en el precio o no:

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

Necesito usar Jquery para verificar si el botón de opción ''sí'' está marcado, y si lo está, hacer una función de adición. ¿Podría alguien decirme cómo haría esto, por favor?

Gracias por cualquier ayuda

editar:

He actualizado mi código a esto, pero no está funcionando. ¿Estoy haciendo algo mal?

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

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

});

// ]]>
</script>

Answer 1

Algo como esto:

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

Answer 2

Esto escuchará el evento cambiado. He intentado con las respuestas de otros, pero esas no me funcionaron y finalmente, esta funcionó.

$(''input:radio[name="postage"]'').change(function(){
    if($(this).is(":checked")){
        alert("lksdahflk");
    }
});

Answer 3

Prueba esto

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

Answer 4

Prueba esto:

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

Answer 5

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

Answer 6

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

O bien, lo anterior, de nuevo, usando un jQuery un poco menos superfluo:

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

Revisado (mejorado-algo) 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

Demostración de JS Fiddle .

Y, además, una actualización leve (ya que estaba editando para incluir fragmentos y enlaces JS Fiddle), para ajustar los elementos <input /> con <label> s, permite hacer clic en el texto para actualizar el <input /> relevante <input /> - y cambiando los medios para crear el contenido para agregar:

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>

Demostración de JS Fiddle .

Además, si solo necesita mostrar el contenido según el elemento que el usuario verifique, una pequeña actualización que alternará la visibilidad mediante un show / hide explícito:

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

Y, finalmente, usando solo 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>

Demostración de JS Fiddle .

Referencias

• CSS:
  • :checked selector :checked
  • Selectores de atributos CSS.
  • Combinador general de hermanos ( ~ ) .
• jQuery:
  • appendTo() .
  • selector de atributos iguales
  • change() .
  • :checked selector :checked
  • filter() .
  • is() .
  • :radio selector de :radio
  • remove() .
  • text() .
  • toggle() .
  • val()

Answer 7

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

Esto escuchará un evento de cambio en los botones de radio. En el momento en que el usuario haga clic en Yes , el evento se activará y podrá añadir lo que desee al DOM.

Answer 8

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

Answer 9

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