Show div when radio button selected
112,567
Solution 1
I would handle it like so:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});
Solution 2
Input elements should have value attributes. Add them and use this:
$("input[name='test']").click(function () {
$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});
Solution 3
$('input[name=test]').click(function () {
if (this.id == "watch-me") {
$("#show-me").show('slow');
} else {
$("#show-me").hide('slow');
}
});
Solution 4
var switchData = $('#show-me');
switchData.hide();
$('input[type="radio"]').change(function(){ var inputData = $(this).attr("value");if(inputData == 'b') { switchData.show();}else{switchData.hide();}});
Solution 5
$('input[type="radio"]').change(function(){
if($("input[name='group']:checked")){
$(div).show();
}
});
Author by
user2886091
Updated on July 09, 2022Comments
-
user2886091 almost 2 years
I am novice in javascript and jQuery. In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden
so: If radio button #watch-me is checked --> div #show-me is visible. If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.
Here is what I have so far.
<form id='form-id'> <input id='watch-me' name='test' type='radio' /> Show Div<br /> <input name='test' type='radio' /><br /> <input name='test' type='radio' /> </form> <div id='show-me' style='display:none'>Hello</div>
and JS:
$(document).ready(function () { $("#watch-me").click(function() { $("#show-me:hidden").show('slow'); }); $("#watch-me").click(function(){ if($('watch-me').prop('checked')===false) { $('#show-me').hide();} }); });
How should I change my script to achieve that?