Select and remove multiple input checkbox elements

This tutorial explains how to select multiple input checkbox elements and remove them without reload the page using javascript.

Download tutorial


An example
The code below is a simple form, with name attribute myForm, with some checkbox which we want to select and remove:

<form name="myForm">
<span id="opt0"><input type="checkbox" name="selection"> Option 1<br></span>
<span id="opt1"><input type="checkbox" name="selection"> Option 2<br></span>
<span id="opt2"><input type="checkbox" name="selection"> Option 3<br></span>
<span id="opt3"><input type="checkbox" name="selection"> Option 4<br></span>
<span id="opt4"><input type="checkbox" name="selection"> Option 5<br></span>
</form>
<div class="msg" id="msg"></div>
<br/><span id="link"><a href="javascript:selectAll()">Select all&lt;/a></span>

Select all items
This javascript function select all items contained inside myForm form:

function selectAll(){
totElements = document.forms.myForm.selection.length;
msg = document.getElementById('msg');
for(i=0; i<totElements; i++){
thisElement = document.forms.myForm.selection[i];
thisElement.checked = true;
}
document.getElementById('link').innerHTML = '<a href="javascript:deselectAll()"> Deselect all</a> / <a href="javascript:removeAll()">Remove selection</a>';
msg.innerHTML='<strong>' +totElements+ '</strong> elements selected.';
msg.style.display='block';
}

Remove all items
This javascript function remove all items selected inside myForm :

function removeAll(){
totElements=document.forms.myForm.selection.length;
countRemovedElements = 0;
for (i=0; i< totElements;i++){
thisElement=document.forms.myForm.selection[i];
if (thisElement.checked == true){
countRemovedElements++;
document.getElementById('opt'+i).style.display='none';
}
}
document.getElementById('msg').innerHTML = '<strong>' +countRemovedElements+' </strong> elements removed.';
}

Deselect all items
This javascript function deselect all items selected inside myForm :

function deselectAll(){
totElements=document.forms.myForm.selection.length;
for (i=0; i<totElements; i++){
thisElement = document.forms.myForm.selection[i];
thisElement.checked = false;
document.getElementById('link').innerHTML = '<a href="javascript:selectAll()">Select all</a>';
}
}