2つのiframeでcheckbox連動
9563 ワード
A,B,Cの3ページ:
AにiframeでB,Cページをそれぞれ埋め込む:
A.html:
B,Cページ:
c 1-c 4,c 2-c 5,c 3-c 6連動、主にjquery操作iframeを記録したい
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>c 1-c 4,c 2-c 5,c 3-c 6連動、主にjquery操作iframeを記録したい