Link to home
Start Free TrialLog in
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

ASKER CERTIFIED SOLUTION
Avatar of Sudhindra A N
Sudhindra A N
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 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

Avatar of whaleyk
whaleyk

ASKER

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.