2个iframe中checkbox联动代码,Js代码库,德仔网

代码语言

代码分类

【Js】 2个iframe中checkbox联动

作者:netCode / 发布于2016/8/15/ 1090

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>

试试其它关键字

同语言下

可能有用的

netCode贡献的其它代码(31)