Full version: jsB@nk » Form » Checkbox » Click Radio Button to View Information
URL: https://www.javascriptbank.com/click-radio-button-to-view-information.html
If you want to save the space on your web pages, let use this JavaScript. When users click any radio button, its corresponding information is automatically displayed. A simple and quick JavaScript but useful and high customization.Also see: Click Radio Button to View Information with images
Full version: jsB@nk » Form » Checkbox » Click Radio Button to View Information
URL: https://www.javascriptbank.com/click-radio-button-to-view-information.html
<script type="text/javascript"><!--// Created by Sandeep Gangadharan - http://sivamdesign.com/scripts/// Topic 1-6 are numbered 0-5 below.var details=new Array();details[0] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."details[1] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki."details[2] = "Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li."details[3] = "Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li."details[4] = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat."details[5] = "Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki."details[6] = "Introduction:nClick on the radio buttons on the left to learn more about the respective topics!"function topica() { if (document.texter.point[0].checked) { document.texter.text.value=details[0]; } if (document.texter.point[1].checked) { document.texter.text.value=details[1]; } if (document.texter.point[2].checked) { document.texter.text.value=details[2]; } if (document.texter.point[3].checked) { document.texter.text.value=details[3]; } if (document.texter.point[4].checked) { document.texter.text.value=details[4]; } if (document.texter.point[5].checked) { document.texter.text.value=details[5]; } }// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { document.texter.text.value=details[6];});//--></script><fieldset style="width: 400px;"><legend><strong>Make your selection</strong></legend><form name="texter"><table style="padding: 10px 10px 0pt;"><tbody><tr><td class="smaller" valign="top" width="100"><input name="point" onclick="topica();" type="radio">Topic 1<br><input name="point" onclick="topica();" type="radio">Topic 2<br><input name="point" onclick="topica();" type="radio">Topic 3<br><input name="point" onclick="topica();" type="radio">Topic 4<br><input name="point" onclick="topica();" type="radio">Topic 5<br><input name="point" onclick="topica();" type="radio">Topic 6<br></td><td><textarea name="text" rows="6" cols="30" wrap="virtual" style="border: medium none ; margin-left: 20px;">