Im trying to work out a basic script to show/hide DIVs depending on what radio buttons are selected. Im new to scripting so not really that sure of what I'm doing... If could be pointed in the right direction that would be great.
At them moment a DIV shows up if I click on the YES answer (and I realise I have duplicate IDs at the moment - still trying to work out the script and I can figure out how to make it work when I change them to a class)
So what I want is a bunch of questions with three answer choices - YES, NO and UNSURE. There will be three hidden DIVs under the questions. After an answer has been placed in every question one of the three divs will show.
All YES answers -
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form id="question-1">
<p>Question one...</p>
<input id="yes" name="test" type="radio" /> Yes
<input name="test" type="radio" />No
<input name="test" type="radio" />Unsure
</form>
<form id="question-2">
<p>Question two...</p>
<input id="yes" name="test" type="radio" /> Yes
<input name="test" type="radio" />No
<input name="test" type="radio" />Unsure
</form>
<form id="question-3">
<p>Question three...</p>
<input id="yes" name="test" type="radio" /> Yes
<input name="test" type="radio" />No
<input name="test" type="radio" />Unsure
</form>
<div id="show-me-1" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'Yes'</div>
<div id="show-me-2" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>
<div id="show-me-3" style="display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;">Show this if all answers are 'No'</div>
<script>
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'yes') {
$('#show-me-1').show();
}
else {
$('#show-me-1').hide();
}
});
});
</script>
</body>
</html>
ajith mohan :
\nAdd 'id' for all 'yes' and 'no' check boxes so that we can take count when all \"yes/no\" buttons are checked.And display corresponding div(show-me-1/show-me-2) accordingly\nAdd class for all, so that we can track if any one is checked.And if any combination of all 3 is checked show corresponding div(show-me-3)\nwhen one div is displayed hide all others. And initially keep all hidden\n\n\n\r\n\r\n \r\n\r\n <!doctype html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Untitled Document</title>\r\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script>\r\n</head>\r\n\r\n<body>\r\n\r\n<form id=\"question-1\">\r\n <p>Question one...</p>\r\n <input class=\"yes\" id=\"yes1\" name=\"test\" type=\"radio\" /> Yes\r\n <input class=\"no\" id=\"no1\" name=\"test\" type=\"radio\" />No\r\n <input class=\"un\" id=\"un1\" name=\"test\" type=\"radio\" />Unsure\r\n</form>\r\n<form id=\"question-2\">\r\n <p>Question two...</p>\r\n <input class=\"yes\" id=\"yes2\" name=\"test\" type=\"radio\" /> Yes\r\n <input class=\"no\" id=\"no2\" name=\"test\" type=\"radio\" />No\r\n <input class=\"un\" id=\"un2\" name=\"test\" type=\"radio\" />Unsure\r\n</form>\r\n<form id=\"question-3\">\r\n <p>Question three...</p>\r\n <input class=\"yes\" id=\"yes3\" name=\"test\" type=\"radio\" /> Yes\r\n <input class=\"no\" id=\"no3\" name=\"test\" type=\"radio\" />No\r\n <input class=\"un\" id=\"un3\" name=\"test\" type=\"radio\" />Unsure\r\n</form>\r\n<div id=\"show-me-1\" style=\"display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;\">Show this if all answers are 'Yes'</div>\r\n<div id=\"show-me-2\" style=\"display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;\">Show this if all answers are a combination of 'Yes' 'No' and 'Unsure'</div>\r\n<div id=\"show-me-3\" style=\"display:none; box-sizing: border-box; padding: 20px; background-color: #efefef;\">Show this if all answers are 'No'</div>\r\n\r\n<script>\r\n $(document).ready(function() {\r\n $('#show-me-1').hide();\r\n $('#show-me-2').hide();\r\n $('#show-me-3').hide();\r\n\r\n\r\n $('input[type=\"radio\"]').click(function() {\r\n\r\n if ($('#yes1').is(\":checked\"))\r\n {\r\n if ($('#yes2').is(\":checked\"))\r\n {\r\n if ($('#yes3').is(\":checked\"))\r\n {\r\n $('#show-me-1').show();\r\n $('#show-me-2').hide();\r\n $('#show-me-3').hide();\r\n }else{\r\n $('#show-me-1').hide();\r\n }\r\n }else{\r\n $('#show-me-1').hide();\r\n }\r\n }else{\r\n $('#show-me-1').hide();\r\n }\r\n\r\n if ($('#no1').is(\":checked\"))\r\n {\r\n if ($('#no2').is(\":checked\"))\r\n {\r\n if ($('#no3').is(\":checked\"))\r\n {\r\n $('#show-me-3').show();\r\n $('#show-me-1').hide();\r\n $('#show-me-2').hide();\r\n }else{\r\n $('#show-me-3').hide();\r\n }\r\n }else{\r\n $('#show-me-3').hide();\r\n }\r\n }else{\r\n $('#show-me-3').hide();\r\n }\r\n\r\n if ($('.yes').is(\":checked\"))\r\n {\r\n if ($('.no').is(\":checked\"))\r\n {\r\n if ($('.un').is(\":checked\"))\r\n {\r\n $('#show-me-2').show();\r\n $('#show-me-1').hide();\r\n $('#show-me-3').hide();\r\n }else{\r\n $('#show-me-2').hide();\r\n }\r\n }else{\r\n $('#show-me-2').hide();\r\n }\r\n }else{\r\n $('#show-me-2').hide();\r\n }\r\n\r\n });\r\n });\r\n</script>\r\n\r\n\r\n</body>\r\n</html>",
2017-09-19T06:30:03
More about “Show / Hide a div depending on radio button selection” related questions