2个iframe中checkbox联动
A,B,C3个页面:
A中利用iframe分别嵌入B,C页面:
A.html:
<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>
c1-c4,c2-c5,c3-c6联动,主要是想记录一下jquery 操作iframe