Radio Button Hide Div

[Total: 0    Average: 0/5]

This shows how to create 3 divs and have them appear and vanish upon a form radio button click.

Head Code:

<script type=text/javascript src="http://www.js-examples.com/bin/div_construct.js"></script>
<script type=text/javascript>
var data1 = "<table bgcolor='green'><tr><td>Data in Table 1</td></tr></table>"
var data2 = "<table bgcolor='red'><tr><td>Data in Table 2</td></tr></table>"
var data3 = "<table bgcolor='blud'><tr><td>Data in Table 3</td></tr></table>"
var t1 = new NewDiv(window,"t1",data1);
var t2 = new NewDiv(window,"t2",data2);
var t3 = new NewDiv(window,"t3",data3);
function _h(_t) {
  if (_t == 1) t1.hide();
  if (_t == 2) t2.hide();
  if (_t == 3) t3.hide();
}
function _s(_t) {
  if (_t == 1) t1.show();
  if (_t == 2) t2.show();
  if (_t == 3) t3.show();
}
function _so(_t) {
  if (_t == 1) { t1.show(); t2.hide(); t3.hide(); }
  if (_t == 2) { t1.hide(); t2.show(); t3.hide(); }
  if (_t == 3) { t1.hide(); t2.hide(); t3.show(); }
}
</script>

Body Code:

<script type=text/javascript>
t1.output();
t2.output();
t3.output();
</script>
<form name="f1">
Hide T1: <input type=radio name="r1" value='Hide T1' onclick='_h(1)'><BR>
Hide T2: <input type=radio name="r1" value='Hide T1' onclick='_h(2)'><BR>
Hide T3: <input type=radio name="r1" value='Hide T1' onclick='_h(3)'><BR>
Show T1: <input type=radio name="r1" value='Show T1' onclick='_s(1)'><BR>
Show T2: <input type=radio name="r1" value='Show T1' onclick='_s(2)'><BR>
Show T3: <input type=radio name="r1" value='Show T1' onclick='_s(3)'><BR>
Show Only T1: <input type=radio name="r1" value='Show T1' onclick='_so(1)'><BR>
Show Only T2: <input type=radio name="r1" value='Show T1' onclick='_so(2)'><BR>
Show Only T3: <input type=radio name="r1" value='Show T1' onclick='_so(3)'><BR>
</form>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *