javascriptA页面引入b页面和C页面分别包含三个Checkbox.实现checkbox联动

2017-09-06 19:00 出处:360java.com 作者:360java  阅读()
创建页面A页面、B页面、C页面,A页面中使用左右框架,引入B页面和C页面,B页面、C页面分别包含三个Checkbox,实现:点击左(右)边的checkbox,右(左)边的checkbox的状态实现联动

javascriptA页面引入b页面和C页面分别包含三个Checkbox.实现checkbox联动

创建页面A页面、B页面、C页面,A页面中使用左右框架,引入B页面和C页面,B页面、C页面分别包含三个Checkbox,实现:点击左(右)边的checkbox,右(左)边的checkbox的状态实现联动。

麻烦大家帮助!!!!!!!!!!!!

< >
最佳答案

给个示例:

<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>

可以。结帖

分享到:
本文标签:

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号