【原创】根据选择的复选框显示相应的数目的Iframe并装载相应的网页-优快云博客

本文介绍了一个简单的JavaScript示例，通过用户选择不同的复选框来动态地加载多个Iframe，并展示相应的网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

闲着没事，一个朋友说他忘记js了，让我帮着写一个，我时候我也忘记了，于是我又重新开始学习js了。。帮一个朋友做个小例子。。

相应的源码及另外6个页面文件的打包文件在此：点击下载

代码如下：

————————

查看代码

 1 <html>
 2 <head>
 3     <title>根据选择的复选框显示相应的数目的Iframe并装载相应的网页</title>
 4     <script type="text/javascript">
 5         function changeIFrameSrc()
 6         {
 7             //alert("当前tempIndex为" + tempIndex);
 8             var thisCB = "";
 9             var tempInnerHTML = "";
10             document.getElementById("divMain").innerHTML="";
11             //document.getElementById("iframeMain").src = "_" + tempIndex + ".html";
12             for (var i = 1; i <= 6; i++)
13             {
14                 //alert("Checkbox" + i + "：：：" + document.getElementById("Checkbox" + i).checked);
15                 if (document.getElementById("Checkbox" + i).checked == true)
16                 {
17                     //document.getElementById("iframeMain").src = "_" + i + ".html";
18                     //alert(document.getElementById("divMain").innerHTML);
19                     tempInnerHTML=tempInnerHTML+

                      "<iframe id='iframeMain"+i+"' style='width: 100%; height: 40px' src='_"+i+".html'></iframe>";
20                     //alert("Checkbox" + i+"为选中，则tempInnerHTML为"+tempInnerHTML);
21                 }
22             }
23             document.getElementById("divMain").innerHTML = tempInnerHTML;
24             //alert(document.getElementById("divMain").innerHTML);
25         }
26     </script>
27 
28 </head>
29 <body>
30     <p class="noprint">
31         用 IFRAME 可以在HTML文件里显示另一个网页。</p>
32     <p>
33         这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。</p>
34     <div id="divMain">
35     </div>
36     <p>
37         <input id="Checkbox1" type="checkbox" name="cbGroup" value="1" onclick="changeIFrameSrc()">1</input>
38         <input id="Checkbox2" type="checkbox" name="cbGroup" value="2" onclick="changeIFrameSrc()">2</input>
39         <input id="Checkbox3" type="checkbox" name="cbGroup" value="3" onclick="changeIFrameSrc()">3</input>
40         <input id="Checkbox4" type="checkbox" name="cbGroup" value="4" onclick="changeIFrameSrc()">4</input>
41         <input id="Checkbox5" type="checkbox" name="cbGroup" value="5" onclick="changeIFrameSrc()">5</input>
42         <input id="Checkbox6" type="checkbox" name="cbGroup" value="5" onclick="changeIFrameSrc()">6</input>
43     </p>
44 </body>
45 </html>