Label for checkbox of an html frame

Question

How can I do like for example, if we click over the label text, I want to toggle (check/uncheck) the checkbox of box.html page.

I've included the box.html page, with an iframe.

Index.html

<html>
    <body>
        <iframe src="box.html" height="25px" width="100px">

        </iframe>
        <label for="box">
            checkbox
        </label>
    </body>
</html>

Box.html:

<html>
    <body>
        <input type="checkbox" id="box">
    </body>
</html>

I think this question can help you https://stackoverflow.com/questions/19498725/control-iframe-content-with-javascript-html — Omid Gharib, Oct 04 '17 at 15:18

score 1 · Accepted Answer · answered Oct 04 '17 at 20:32

First thing, both the pages (Main and iframe) should be from the same domain, else it will throw cross domain error.

1st Page

<html><head>
<script>
    function delegate() {
        var iframe = document.getElementById("myIframe");
        iframe.contentWindow.change();
    }
</script></head><body>
<iframe id="myIframe" src="box.html" height="25px" width="100px"></iframe>
<label for="box" onclick="delegate()">
    Click Here.
</label></body></html>

2nd Page

<html><head>
<script>
    function change() {
        document.getElementById('box').checked = !document.getElementById('box').checked;
    }
</script></head><body>
<input type="checkbox" id="box"></body></html>

Label for checkbox of an html frame

1 Answers1