I am trying to implement functionality to show/hide a div when a single checkbox is selected. Currently, it works with "Select all" but I am struggling to make it work with a single checkbox. Below is the code for "Select All":
JS:
<script language='JavaScript'>
var checkboxcount = 1;
function doCheckOne() {
if(checkboxcount == 0) {
with (document.messageform) {
for (var i=0; i < elements.length; i++) {
if (elements[i].type == 'checkbox') {
elements[i].checked = false;
document.getElementById('mail_delete_button').style.display = "none";
}
}
checkboxcount = checkboxcount + 1;
}
} else
with (document.messageform) {
for (var i=0; i < elements.length; i++) {
if (elements[i].type == 'checkbox') {
elements[i].checked = true;
document.getElementById('mail_delete_button').style.display = "block";
}
}
checkboxcount = checkboxcount - 1;
}
}
</script>
HTML:
<a href="javascript:void(0);" onclick="doCheckAll();this.blur();">Select all</a>
<div id="mail_delete_button" style="display: none;"></div>
I want to display the div "mail_delete_button" when a single checkbox is selected and hide it when no checkboxes are checked. Please note that my input field is in the form "messageform." Here is my input code:
<input type='checkbox' name='delete_convos[]' value='{$pms[pm_loop].pmconvo_id}'>
Your assistance on this issue would be highly appreciated! Thank you! :)