I have a web page that consists of a checkbox (parent) and on this same web page, I also have a iframe that is sourced from another page that displays a number of records, which
Okay here is an example...
First here is the source for the iFrame contents (I called it FramePage.htm)...
<body>
<input id="Checkbox1" type="checkbox" name="checkbox" />
<input id="Checkbox2" type="checkbox" name="checkbox"/>
<input id="Checkbox3" type="checkbox" name="checkbox" />
</body>
Here is the source on the page that houses the iFrame...
<iframe id="frame" src="FramePage.htm"></iframe>
<input id="Button1" type="button" value="button" onclick="setData()" />
<script type="text/javascript">
function setData()
{
var frame = document.getElementById('frame');
var checkboxes = frame.contentWindow.document.getElementsByName('checkbox');
for (var i = 0; i < checkboxes.length; i++)
{
checkboxes[i].checked = true;
}
}
</script>
Clicking the button on the parent page will select all the checkboxes with the name 'checkboxes' on the frame page.
Hope this helps :)
This might be helpful: a jquery plugin to easily access the iframe document. That is, if its not cross domain like peter said.
This works perfectly well
$("#select_checkbox").change(function(event){
$("#content").contents().find(':checkbox').each(function(){
jQuery(this).attr('checked', $("#select_checkbox").is(':checked'));
});
});
where select_checkbox is the id of the parent checkbox, content is the id of the frame
If the URL of the iframe src is not in the same domain as the parent, there could be cross-domain security issues that prevent manipulation via JavaScript, as per the same-origin policies.