首页 新闻 搜索 专区 学院

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

0
悬赏园豆:30 [已解决问题] 解决于 2012-12-04 18:00

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

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

winnnnnner的主页 winnnnnner | 初学一级 | 园豆:47
提问于:2012-12-04 12:38
< >
分享
最佳答案
0

给个示例:

<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>
收获园豆:30
chenping2008 | 大侠五级 |园豆:9836 | 2012-12-04 15:03

可以。结帖

winnnnnner | 园豆:47 (初学一级) | 2012-12-04 17:59
其他回答(3)
0

你这个描述不清楚。。

jone_e | 园豆:1410 (小虾三级) | 2012-12-04 12:49

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

支持(0) 反对(0) winnnnnner | 园豆:47 (初学一级) | 2012-12-04 12:50

这描述清楚了

支持(0) 反对(0) winnnnnner | 园豆:47 (初学一级) | 2012-12-04 12:50

如图上那样效果

支持(0) 反对(0) winnnnnner | 园豆:47 (初学一级) | 2012-12-04 12:51

@winnnnnner: 是IFrame框架吗?

支持(0) 反对(0) jone_e | 园豆:1410 (小虾三级) | 2012-12-04 13:01

是的。

支持(0) 反对(0) winnnnnner | 园豆:47 (初学一级) | 2012-12-04 13:03

因该怎么实现?

支持(0) 反对(0) winnnnnner | 园豆:47 (初学一级) | 2012-12-04 13:05

@winnnnnner: 

下面是PageA的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
</head>
<frameset cols="40%;40%;*">
<frame id="B" src="PageB.htm" noresize="yes"  border="1px"  scrolling="auto" bordercolor="blue"/>
<frame id="C" src="PageC.htm" noresize="yes"  border="1px"  scrolling="auto" bordercolor="blue" />
<frame id="D"/>
</frameset>

 

下面是PageB的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../../Content/JS/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(function() {
            var MainPage = window.parent.document.getElementById("C").contentWindow.document.getElementsByTagName("input");
            $("input").click(function() {
                    CheckIndex = $("input").index(this);
                    MainPage[CheckIndex].checked = this.checked;
                    return;
            });
        })
    </script>
</head>
<body>
    <input type="checkbox" value="0"  /><br />
    <input type="checkbox" value="1" />
    <br />
    <input type="checkbox" value="2" />
</body>
</html>

下面是PageC:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <input type="checkbox" value="4" /><br />
    <input type="checkbox" value="5" />
    <br />
    <input type="checkbox" value="6" />
</body>
</html>
支持(0) 反对(0) jone_e | 园豆:1410 (小虾三级) | 2012-12-04 17:21

@winnnnnner: 上面的代码可以直接运行。效果:

支持(0) 反对(0) jone_e | 园豆:1410 (小虾三级) | 2012-12-04 17:26
0

不难,将B框架选中的值传到C框架中就可以实现了。。。

拾梦小侠ด้้้ | 园豆:752 (小虾三级) | 2012-12-04 13:18
0

在A页面是可以找到B和C框架的引用的~

当B框架里面的复选框选到后,找到B的父框架也就是A,通过A又可以引用到C,这样就可以找到C里面相应的复选框,然后设置checked=checked,就OK了

叶小党 | 园豆:481 (菜鸟二级) | 2012-12-04 13:28

 给个代码看看

支持(0) 反对(0) winnnnnner | 园豆:47 (初学一级) | 2012-12-04 14:25

好吧。楼下写了一个,我也写了一个。

A页面:

 1 <head>
 2     <script>
 3           function RegistChk(){
 4          aIframe=document.getElementById("bFrame");
 5          bIframe=document.getElementById("cFrame");   
 6           
 7              for(var i=1;i<4;i++){
 8             var Achki= aIframe.contentWindow.document.getElementById('chk'+i);
 9         var Bchki= bIframe.contentWindow.document.getElementById('chk'+i);
10           Achki.onclick=function(){
11                      var currentChk=aIframe.contentWindow.event.srcElement;
12                      var currentChkId=currentChk.id;
13               var Achki2= aIframe.contentWindow.document.getElementById(currentChkId);
14           var Bchki2= bIframe.contentWindow.document.getElementById(currentChkId);
15                     Bchki2.checked=Achki2.checked;                  
16         }
17              Bchki.onclick=function(){
18                      var currentChk=bIframe.contentWindow.event.srcElement;
19                      var currentChkId=currentChk.id;
20               var Achki2= aIframe.contentWindow.document.getElementById(currentChkId);
21           var Bchki2= bIframe.contentWindow.document.getElementById(currentChkId);
22                     Achki2.checked=Bchki2.checked;                  
23         }
24          }
25            }
26              //alert(aIframe.contentWindow.document.getElementById("chk1").value);
27     </script>
28 </head>
29 
30 <body onload='RegistChk();'>
31 <fieldset>
32     <legend>我是A窗体</legend>
33     <iframe id="bFrame" border="0" vspace="0" hspace="0" marginwidth="0" 
34 
35 marginheight="0" framespacing="0" frameborder="0" scrolling="no" width="468" height="60" 
36 
37 src="b.htm"></iframe> 
38 <iframe id="cFrame" border="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" 
39 
40 framespacing="0" frameborder="0" scrolling="no" width="468" height="60" 
41 
42 src="c.htm"></iframe> 
43 </fieldset>
44 </body>

B页面:

1 <body>
2 <fieldset>
3     <legend>我是BIframe</legend>
4     <input type='checkbox' id='chk1' value='1' />
5      <input type='checkbox' id='chk2' />
6      <input type='checkbox' id='chk3' />
7 </fieldset>
8 <body>

C页面:

1 <body>
2     <fieldset>
3     <legend>我是CIframe</legend>
4     <input type='checkbox' id='chk1' />
5      <input type='checkbox' id='chk2' />
6      <input type='checkbox' id='chk3' />
7 </fieldset>
8  
9 <body>
支持(0) 反对(0) 叶小党 | 园豆:481 (菜鸟二级) | 2012-12-04 15:26

@叶小党: 谢谢

支持(0) 反对(0) winnnnnner | 园豆:47 (初学一级) | 2012-12-04 18:01
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册