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 @   chenping2008  阅读(1414)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae