Jquery If radio button is checked

问题:

Possible Duplicate:
Check of specific radio button is checked

I have these 2 radio buttons at the moment so that the user can decide whether they need postage included in the price or not:

 Yes  No 

I need to use Jquery to check if the 'yes' radio button is checked, and if it is, do an append function. Could someone tell me how I'd do this please?

Thanks for any help

edit:

I've updated my code to this, but it's not working. Am I doing something wrong?

回答1:

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

Or, the above - again - using a little less superfluous jQuery:

$('input:radio[name="postage"]').change(     function(){         if (this.checked && this.value == 'Yes') {             // note that, as per comments, the 'changed'             //  will *always* be checked, as the change             // event only fires on checking an , not             // on un-checking it.             // append goes here         }     }); 

Revised (improved-some) jQuery:

// defines a div element with the text "You're appendin'!" // assigns that div to the variable 'appended' var appended = $('
').text("You're appendin'!");  // assigns the 'id' of "appended" to the 'appended' element appended.id = 'appended';  // 1. selects '' 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 = $('
').text("You're appendin'!"); appended.id = 'appended'; $('input:radio[name="postage"]').change(function() {   if ($(this).val() == 'Yes') {     $(appended).appendTo('body');   } else {     $(appended).remove();   } });

 Yes No

JS Fiddle demo.

And, further, a mild update (since I was editing to include Snippets as well as the JS Fiddle links), in order to wrap the elements with s - allow for clicking the text to update the relevant - and changing the means of creating the content to append:

var appended = $('
', {   'id': 'appended',   'text': 'Appended content' }); $('input:radio[name="postage"]').change(function() {   if ($(this).val() == 'Yes') {     $(appended).appendTo('body');   } else {     $(appended).remove();   } });

    Yes    No

JS Fiddle demo.

Also, if you only need to show content depending on which element is checked by the user, a slight update that will toggle visibility using an explicit show/hide:

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

    Yes    No 
   
This should only show when the 'Yes' radio <input> element is checked.
 

And, finally, using just 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; }

 Yes No 
   
This should only show when the 'Yes' radio <input> element is checked.
 

JS Fiddle demo.

References:

• CSS:
  • :checked selector.
  • CSS Attribute-selectors.
  • General sibling (~) combinator.
• jQuery:
  • appendTo().
  • attribute-equals selector.
  • change().
  • :checked selector.
  • filter().
  • is().
  • :radio selector.
  • remove().
  • text().
  • toggle().
  • val().

回答2:

Try this

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

回答3:

Something like this:

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

回答4:

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

This will listen for a change event on the radio buttons. At the time the user clicks Yes, the event will fire and you will be able to append anything you like to the DOM.

回答5:

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

回答6:

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

回答7:

Try this:

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

回答8:

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

回答9:

This will listen to the changed event. I have tried the answers from others but those did not work for me and finally, this one worked.

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

文章来源: Jquery If radio button is checked