Javascript-delete rows with unchecked checkbox

I have a table with about 20rows, which contain a checkbox and a bit of text each. What I’m trying to find a way to do is to have delete button at the bottom of the page.When i clicked on DELETE button, it should delete records of checked checkbox rows. I need to delete all the table rows which contain CHECKED textboxes.and remaining checkboxes should be displayed. And we should keep remaining checkboxes in ARRAYLIST.

I need to do this in JavaScript (which is what I’m having trouble with) / if in rear case JSP is accepted- I’ve been able to get bits of it to work at various times, but I’m running out of time and I really need help. Any suggestions anyone has would be more than appreciated!
Thanks!

Basically like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
function remove() {
var aObj=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
var i=aObj.length; 
while(i--) { 
    if(!aObj[i].getElementsByTagName('input')[0].checked) {
        aObj[i].parentNode.removeChild(aObj[i]);
        }
	}
}
</script>

<style type="text/css">
td {text-align:right;}
</style>

</head>
<body>
<form action="#" name="form1">
<table>
<tbody>
    <tr><td><label>doe<input type="checkbox"></label></td></tr>
    <tr><td><label>ray<input type="checkbox"></label></td></tr>
    <tr><td><label>me<input type="checkbox"></label></td></tr>
    <tr><td><label>far<input type="checkbox"></label></td></tr>
    <tr><td><label>so<input type="checkbox"></label></td></tr>
    <tr><td><label>la<input type="checkbox"></label></td></tr>
</tbody>
<tfoot>
	<tr><td><button type="button" onclick="remove();">remove</button></td></tr>
</tfoot>
</table>
</form>
</body>
</html>

Thank you for your reply:)
But in this program ,it is deleting unchecked checkboxes.
I want to delete checked checkboxes.And store all unchecked checkboxes in Arraylist(collection). and print that arraylist.

Please, your reply is valuable to me.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
function remove() {
var aObj=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
var i=aObj.length; 
var unchecked = [];
while(i--) {
	var box =aObj[i].getElementsByTagName('input')[0]; 
    if(box.checked) {
        aObj[i].parentNode.removeChild(aObj[i]);
        }
    else {
        unchecked.push(box.value);
        }
	}
alert(unchecked);
}
</script>

<style type="text/css">
td {text-align:right;}
</style>

</head>
<body>
<form action="#" name="form1">
<table>
<tbody>
    <tr><td><label>doe<input type="checkbox" value="doe"></label></td></tr>
    <tr><td><label>ray<input type="checkbox" value="ray"></label></td></tr>
    <tr><td><label>me<input type="checkbox" value="me"></label></td></tr>
    <tr><td><label>far<input type="checkbox" value="far"></label></td></tr>
    <tr><td><label>so<input type="checkbox" value="so"></label></td></tr>
    <tr><td><label>la<input type="checkbox" value="la"></label></td></tr>
</tbody>
<tfoot>
	<tr><td><button type="button" onclick="remove();">remove</button></td></tr>
</tfoot>
</table>
</form>
</body>
</html>

Thank you for your help…it woks

But please , could we store all these unchecked checkboxes in ARRAYLIST or any collection …and print below that remove button…

Please , help me

please, help me out…
I want to store all unchecked checkboxes in an Arraylist in java(in should be in scriptlet)…and print it after clicking on remove button

I am new in javascript and java…

Thank you for your help in advance.

Just change the name of the array.

The contents of the array can be written to the document using innerHTML

Thanks for your reply…
i have tried using innerHtml…but i dont know much about javascript.I am new in Javascript. So, could you help me and send me example code to store that unchecked checkboxes in arraylist i.e. collections…

Please…Help me out:(