Jquery Radio Button Show Div
Hey guys, what function could I use to say, if this radio button is checked show this 'div'. Thanks in advance.
Solution 1:
HTML
<formid='form-id'><inputid='watch-me'name='test'type='radio' /> Show Div<br /><inputname='test'type='radio' /><br /><inputname='test'type='radio' /></form><divid='show-me'style='display:none'>Hello</div>
jQuery
$('#form-id').change(function() {
if ($('#watch-me').attr('checked')) {
$('#show-me').show();
} else {
$('#show-me').hide();
}
});
You can see it in action here: http://jsfiddle.net/wmKGd/
UPDATE 25.01.2013 After Upgrading from jQuery Library 1.8.x to 1.9.x Please use instead of jQuery Library 1.8.x
jQuery('#some-id').attr('checked')
jQuery Library 1.9.x
jQuery('#some-id').prop('checked')
You can see it with updated script in action here: http://jsfiddle.net/9XXRY/
Solution 2:
I liked @tinifni's jsfiddle. Here's one with 3 divs that show or hide depending on the radio.
http://jsfiddle.net/dbwest/wmKGd/572/
$('#form-id').change(function() {
if ($('#watch-me').attr('checked')) {
$('#show-me').show();
} else {
$('#show-me').hide();
}
if ($('#watch-me2').attr('checked')) {
$('#show-me2').show();
} else {
$('#show-me2').hide();
}
if ($('#watch-me3').attr('checked')) {
$('#show-me3').show();
} else {
$('#show-me3').hide();
}
});
Solution 3:
$("myradiobuttonselector").change(function () {
if ($(this).attr("checked")) {
$("mydivSelector").show();
}
else {
$("mydivSelector").hide();
}
});
Solution 4:
This is what I use. Replace “mydiv” with the id of your radio button and “content1” with the content you want to show/hide.
Post some html if you need further help.
$(document).ready(function(){
$('#content1').hide();
$('a').click(function(){
$('#content1').show('slow');
});
$(‘#mydiv’).click(function(){
$('#content1').hide('slow');
})
});
Rick
Post a Comment for "Jquery Radio Button Show Div"