Organizational Research By

Surprising Reserch Topic

Experts Most Trusted Topic


Jquery If 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:

 type="radio" id="postageyes" name="postage" value="Yes" /> Yes
 type="radio" id="postageno" name="postage" value="No" /> 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?

 type='text/javascript'>
// 
jQuery(document).ready(function(){

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

});

// ]]>

asked May 8, 2015 in JAVASCRIPT by rajesh
0 votes
12 views



Related Hot Questions



Walkin Jobs Opening



Government Jobs Opening

" rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

answered May 8, 2015 by rajesh
0 votes
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();
" rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">



  

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


answered May 8, 2015 by rajesh
0 votes

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;
}

 type="radio" id="postageyes" name="postage" value="Yes" />
 for="postageyes">Yes
 type="radio" id="postageno" name="postage" value="No" />
 for="postageno">No
 id="conditional">
  

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

answered May 8, 2015 by rajesh

...