Kamis, 08 November 2007
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</a></span>
<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</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';
}
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.';
}
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>';
}
}
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>';
}
}
