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

posted @ 2012-12-04 15:28  chenping2008  阅读(1410)  评论(0编辑  收藏  举报