Question

I have a page opening in an iframe using colorbox. This page has a checkbox. When the colorbox is closed i want to check if that checkbox was clicked and if so run a function.

Here is what i have:

$(".colorbox").colorbox({
        rel:'group1',
        iframe: true,
        width:100+"%",
        height:100+"%",
        onClosed:function(){ 
            var chosenMap = $("input:checkbox#modern");
            if (chosenMap.checked) {
                alert("checked");
                }else{
            alert("not checked");
                }
        }
        });

and the html in the colorbox is:

<form>
<label for="modern" class="check activeCheck"><input type="checkbox"  name="Style" id="modern" >Custom</label>
<input class="next button" type="button"  value="Back" onclick="parent.$.colorbox.close(); return false;" >
</form>

Answer 1

Things are going to get complicated going down this route, because 1) onClosed triggers after the iframe has been removed (and data destroyed) and 2) onClosed isn’t being triggered in the correct DOM to be able to find input#modern. input#modern exists in the iframed document, you have to query that a different way. Instead, can’t you just do what you need to do before calling parent.$.colorbox.close()? Example:

<script>
function chosen() {
            var chosenMap = $("input:checkbox#modern");
            if (chosenMap.checked) {
                alert("checked");
                }else{
            alert("not checked");
                }
            parent.$.colorbox.close();
 }
</script>
<input class="next button" type="button"  value="Back" onclick="chosen(); return false;" >