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