Avatar of whaleyk
whaleyk asked on

hiding a div until multiple radio buttons are checked

I was really trying to figure this one out by myself, but I'm runing out of time as usual.  I just need to hide div="agree" until all questions have been answered (there will be many more than just these 2).  I'm currently displaying the div after answering just one.

Thanks as always.
<html> 
<head> 
<title>Thank you!</title> 

<script type="text/javascript"> 

function doCheck()
{
	var i=1, j=1
	while(document.getElementById("q" + i + "_" + j) == null){
         document.getElementById("agree").style.display = "none";
		
    } 
	document.getElementById("agree").style.display = "block";
}
</script> 

</head> 
<body> 
<table> 
<form name="form1" id="form1" method="post" action=""> 
<tr> 
<td width="200">
Question1
<input type="radio" name="q1" id="q1_1" value="a1" onclick="doCheck()">1<br>
<input type="radio" name="q1" id="q1_2" value="a1" onclick="doCheck()">2<br>
<input type="radio" name="q1" id="q1_3" value="a1" onclick="doCheck()">3<br>
<br>
<br>
Question2
<input type="radio" name="q2" id="q2_1" value="a1" onclick="doCheck()">1<br>
<input type="radio" name="q2" id="q2_2" value="a1" onclick="doCheck()">2<br>
<input type="radio" name="q2" id="q2_3" value="a1" onclick="doCheck()">3<br></td> 
</tr> 
<tr> 
<td><div class="hide" id="agree">Keep me hidden until both questions one and 2 have bene hiden</div></td> 
</tr> 
<tr> 
<td colspan="3">&nbsp;</td> 
</tr> 
</form> 
</table> 
</body> 
</html>

Open in new window

JavaScript

Avatar of undefined
Last Comment
whaleyk

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Sudhindra A N

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
leakim971

using jQuery (you may need to set/update the number of question line 8) :
<html> 
<head> 
<title>Thank you!</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript"> 
	$(document).ready(function() {
		$("input:radio[name^='q']").change(function() {
			var nb_questions = 2; // there's 2 questions
			if( $("input:radio[name^='q']:checked").length == nb_questions ) {
				$("#agree").hide();
			}
		})
	})
</script> 
</head> 
<body> 
<table> 
<form name="form1" id="form1" method="post" action=""> 
<tr> 
<td width="200">
Question1<br />
<input type="radio" name="q1" id="q1_1" value="a1">1<br>
<input type="radio" name="q1" id="q1_2" value="a1">2<br>
<input type="radio" name="q1" id="q1_3" value="a1">3<br>
<br>
<br>
Question2<br />
<input type="radio" name="q2" id="q2_1" value="a1">1<br>
<input type="radio" name="q2" id="q2_2" value="a1">2<br>
<input type="radio" name="q2" id="q2_3" value="a1">3<br></td> 
</tr> 
<tr> 
<td><div class="hide" id="agree">Keep me hidden until both questions one and 2 have bene hiden</div></td> 
</tr> 
<tr> 
<td colspan="3">&nbsp;</td> 
</tr> 
</form> 
</table> 
</body> 
</html>

Open in new window

ASKER
whaleyk

I'm so sorry, I thought I had marked this as complete immediately.  I needed for a demo, and this did the trick.  Thank you and sorry again for the delay in my response to you.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck