JavaScript - передача параметров

Эмм... Зачем тогда в форме присутствует:
[code]
<input type="hidden" name="hid0" >
...
<input type="hidden" name="hid7" >
[/code]

Если не для того что вам необходимо?
Но в функции cl() я не вижу чтобы вы что-то присваивали этим скрытым переменным. Может стоит, если вы их держите на форме? Можете использовать одну переменную скрытую и присваивать ей значения в виде "0010011" (true|false для каждого из семи чекбоксов) и потом это обрабатывать на сервере. Да на самом деле множество способо может быть в каком виде передать. Но раз уж вы добавили скрытые инпуты, делайте же ж с ними что-то. ;)

И вот тут:
[code]
<input type=submit name="sub" value="Submit" onclick="cl();">
[/code]
Вызов cl() мне неясен, для чего это нужно.

Нельзя повторяться в аттрибуте ID, он должен быть уникальным:
[code]
id="img_check"
[/code]

event заменить на this и переписать соответственно в функции cl() кусочек .
0 по всей видимости не должен быть нулем для всех вызовов, а должен принимать значения от 0 до 6, раз вы сохраняете текущее состояние в массив.
[code]
onclick="cl(event,0);"
[/code]

Продолжать можно долго, я уже молчу про ошибки HTML. Значения аттрибутов в коде должно быть заключено в ковычки, у картинок должен быть хотябы пустой ALT, с вашим доктайпом форма не может иметь аттрибут NAME, STYLE и SCRIPT должны иметь аттрибут TYPE.

Вот работающий draft вариант, того что вы имели в виду, без исправления ошибок синтаксиса HTML и с методом GET чтобы сразу увидеть результат отправки. Привожу вам только для того чтобы натолкнуть на верные мысли, copy-paste не рекомендую, это портит мозг.

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style>
#videoEdit { height:135px; width:800px; padding:0px; margin:0px;}
#videoField { height:200px; width:505px; margin-left:40px; padding:0px;}
#videoSelection2 { height:310px; width:520px; padding:0px; margin:0px;}
#videoPayment { height:250px; width:600px; margin-left:100px; margin-top:20px; background-color:#2a598f;}
.videoOption { height:56px; width:250px; background-color:#fff; border:1px #e7e7e7 solid; float: left;}
.change_videoOption { height:56px; width:250px; background-color:#c7e0f4; border:1px #e7e7e7 solid; float: left;}
.account_videoItem { height:56px; width:300px; background-color:#fff; border:1px #e7e7e7 solid; }
.videoItem2 { height:56px; width:250px; background-color:#c7e0f4; border:1px #e7e7e7 solid; }
.field { width:504px; height:60px; float:left; }
.videoCheck {width:30px; height:24px; float:right; margin-top: 17px;}
.videoRect {width:50px; height:50px; margin-right:20px; background-color:#999; float:left; margin-top: 3px; margin-left: 3px;}
.videoFieldName { height:20px; width:150px; float:left; position: relative;line-height: 58px;}
</style>
<title>MyVidayo</title>
<script>
var box_states = new Array(0,0,0,0,0,0,0,0);
function cl(e, index)
{
if (e.parentNode.className == 'videoOption')
{
box_states[index]=1;
e.parentNode.className = 'change_videoOption';
e.src = 'img/chek1.png';
}
else
{
box_states[index]=0;

e.parentNode.className = 'videoOption';
e.src = 'img/chek0.png';
}
}
function onSubmit(){
document.getElementById("values").value = box_states.join("");
}
</script>

</head>
<body>

<div id="videoField">
<form name="myForm" method="get">
<div class="field">
<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,0);">
</div>

<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,1);">
</div>
</div>
<div class="field">
<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,2);">
</div>

<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,3);">
</div>
</div>

<div class="field">
<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,4);">
</div>

<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,5);">
</div>
</div>

<div class="field">
<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,6);">
</div>

<div class="videoOption" >

<img src="img/chek0.png" onclick="cl(this,7);">
</div>
</div>
<input type="hidden" id="values" name="values"/>
<input type=submit name="sub" value="Submit" onclick="onSubmit()"/>
</form>
</div>

</body>
</html>
[/code]