Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Ô chọn » Chọn thông tin muốn xem
URL: https://www.javascriptbank.com/click-radio-button-to-view-information.html
Bạn có thể dùng đoạn mã JavaScript này nếu cần tiết kiệm không gian trên các trang web. Mỗi khi người dùng nhấn chọn các nút radio, thông tin cần thiết dành cho mỗi nút sẽ được hiển thị. Một đoạn mã đơn giản nhưng hữu ích.Bạn có thể xem thêm Chọn thông tin muốn xem dùng ảnh
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Ô chọn » Chọn thông tin muốn xem
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;">