Jquery If radio button is checked
$('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' // <input> will *always* be checked, as the change // event only fires on checking an <input>, 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 = $('<div />').text("You're appendin'!");// assigns the 'id' of "appended" to the 'appended' elementappended.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(); } });And, further, a mild update (since I was editing to include Snippets as well as the JS Fiddle links), in order to wrap the <input /> elements with <label>s - allow for clicking the text to update the relevant <input /> - and changing the means of creating the content to append:
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>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();<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 <input> element is checked.</p></div>And, finally, using just CSS:
/* setting the default of the conditionally-displayed contentto hidden: */#conditional { display: none;}/* if the #postageyes element is checked then the general sibling ofthat 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 <input> element is checked.</p></div>References:
- CSS:
:checkedselector.- CSS Attribute-selectors.
- General sibling (
~) combinator.
- jQuery:
Try this
if($("input:radio[name=postage]").is(":checked")){ //Code to append goes here}