javascriptA页面引入b页面和C页面分别包含三个Checkbox.实现checkbox联动
0
悬赏园豆：30
[已解决问题]
解决于 2012-12-04 18:00
创建页面A页面、B页面、C页面，A页面中使用左右框架，引入B页面和C页面，B页面、C页面分别包含三个Checkbox，实现：点击左（右）边的checkbox，右（左）边的checkbox的状态实现联动。
麻烦大家帮助！！！！！！！！！！！！
最佳答案
0
给个示例：
<html> <head> <title></title> <script type="text/javascript" src="js/jquery-1.8.0.js"></script> <script type="text/javascript"> var getIframeDocument = function (element) { return element.contentDocument || element.contentWindow.document; }; window.onload = function () { var f11 = getIframeDocument(document.getElementById("f1")) var f22 = getIframeDocument(document.getElementById("f2")); $(f11).children().find(":checkbox").click(function () { var i = $(this).prevAll(":checkbox").length; if ($(this).attr("checked") == "checked") { $(f22).children().find(":checkbox").eq(i).attr("checked", "checked"); } else { $(f22).children().find(":checkbox").eq(i).removeAttr("checked"); } }); $(f22).children().find(":checkbox").click(function () { var i = $(this).prevAll(":checkbox").length; if ($(this).attr("checked") == "checked") { $(f11).children().find(":checkbox").eq(i).attr("checked", "checked"); } else { $(f11).children().find(":checkbox").eq(i).removeAttr("checked"); } }); } </script> </head> <body> <div> <iframe src='B.html' width="100" height="100" id="f1" name="f1" ></iframe> <iframe src='C.html' width="100" height="100" id="f2" name="f2" ></iframe> </div> </body> </html>
B,C页面：
<html> <head> <title></title> </head> <body> <div> <input type="checkbox" style="display:block" id="c1" name="c1" /><label for="c1">checkbox1</label> <input type="checkbox" style="display:block" id="c2" name="c2" /><label for="c2">checkbox2</label> <input type="checkbox" style="display:block" id="c3" name="c3" /><label for="c3">checkbox3</label> </div> </body> </html>
<html> <head> <title></title> </head> <body> <div> <input type="checkbox" style="display:block" id="c4" name="c4" /><label for="c4">checkbox4</label> <input type="checkbox" style="display:block" id="c5" name="c5" /><label for="c5">checkbox5</label> <input type="checkbox" style="display:block" id="c6" name="c6" /><label for="c6">checkbox6</label> </div> </body> </html>
收获园豆：30
可以。结帖
其他回答(3)
0
你这个描述不清楚。。
创建页面A页面、B页面、C页面，A页面中使用左右框架，引入B页面和C页面，B页面、C页面分别包含三个Checkbox，实现：点击左（右）边的checkbox，右（左）边的checkbox的状态实现联动。
这描述清楚了
如图上那样效果
@winnnnnner: 是IFrame框架吗？
是的。
因该怎么实现？
@winnnnnner:
下面是PageA的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> </head> <frameset cols="40%;40%;*"> <frame id="B" src="PageB.htm" noresize="yes" border="1px" scrolling="auto" bordercolor="blue"/> <frame id="C" src="PageC.htm" noresize="yes" border="1px" scrolling="auto" bordercolor="blue" /> <frame id="D"/> </frameset>
下面是PageB的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="../../Content/JS/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function() { var MainPage = window.parent.document.getElementById("C").contentWindow.document.getElementsByTagName("input"); $("input").click(function() { CheckIndex = $("input").index(this); MainPage[CheckIndex].checked = this.checked; return; }); }) </script> </head> <body> <input type="checkbox" value="0" /><br /> <input type="checkbox" value="1" /> <br /> <input type="checkbox" value="2" /> </body> </html>
下面是PageC：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> </head> <body> <input type="checkbox" value="4" /><br /> <input type="checkbox" value="5" /> <br /> <input type="checkbox" value="6" /> </body> </html>
@winnnnnner: 上面的代码可以直接运行。效果：
0
不难，将B框架选中的值传到C框架中就可以实现了。。。
0
在A页面是可以找到B和C框架的引用的~
当B框架里面的复选框选到后，找到B的父框架也就是A，通过A又可以引用到C，这样就可以找到C里面相应的复选框，然后设置checked=checked，就OK了
给个代码看看
好吧。楼下写了一个，我也写了一个。
A页面：
1 <head> 2 <script> 3 function RegistChk(){ 4 aIframe=document.getElementById("bFrame"); 5 bIframe=document.getElementById("cFrame"); 6 7 for(var i=1;i<4;i++){ 8 var Achki= aIframe.contentWindow.document.getElementById('chk'+i); 9 var Bchki= bIframe.contentWindow.document.getElementById('chk'+i); 10 Achki.onclick=function(){ 11 var currentChk=aIframe.contentWindow.event.srcElement; 12 var currentChkId=currentChk.id; 13 var Achki2= aIframe.contentWindow.document.getElementById(currentChkId); 14 var Bchki2= bIframe.contentWindow.document.getElementById(currentChkId); 15 Bchki2.checked=Achki2.checked; 16 } 17 Bchki.onclick=function(){ 18 var currentChk=bIframe.contentWindow.event.srcElement; 19 var currentChkId=currentChk.id; 20 var Achki2= aIframe.contentWindow.document.getElementById(currentChkId); 21 var Bchki2= bIframe.contentWindow.document.getElementById(currentChkId); 22 Achki2.checked=Bchki2.checked; 23 } 24 } 25 } 26 //alert(aIframe.contentWindow.document.getElementById("chk1").value); 27 </script> 28 </head> 29 30 <body onload='RegistChk();'> 31 <fieldset> 32 <legend>我是A窗体</legend> 33 <iframe id="bFrame" border="0" vspace="0" hspace="0" marginwidth="0" 34 35 marginheight="0" framespacing="0" frameborder="0" scrolling="no" width="468" height="60" 36 37 src="b.htm"></iframe> 38 <iframe id="cFrame" border="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" 39 40 framespacing="0" frameborder="0" scrolling="no" width="468" height="60" 41 42 src="c.htm"></iframe> 43 </fieldset> 44 </body>
B页面：
1 <body> 2 <fieldset> 3 <legend>我是BIframe</legend> 4 <input type='checkbox' id='chk1' value='1' /> 5 <input type='checkbox' id='chk2' /> 6 <input type='checkbox' id='chk3' /> 7 </fieldset> 8 <body>
C页面：
1 <body> 2 <fieldset> 3 <legend>我是CIframe</legend> 4 <input type='checkbox' id='chk1' /> 5 <input type='checkbox' id='chk2' /> 6 <input type='checkbox' id='chk3' /> 7 </fieldset> 8 9 <body>
@叶小党: 谢谢
