group of checkboxes - only the first changes value
===

I have an issue that I 'm trying to solve. I searched in internet but nothing helped me.. I have multiple groups of checkboxes and I want to get their values and pass them in db. The problem is that only the first checkbox of group gets the right value. Here is my code :

Html code : 

    <tr>
            <th>Δημοτικός Κήπος</th>
            <td align="center">
                <span style="display:none;">
                    <input type="checkbox" name="place1[]" value="1" id="place1_1"/>
                </span>
                <img id="Imageplace1_1" 
                src="unchecked.jpg" 
                width="35" 
                height="35" 
                onclick="CheckBoxClicked('place1_1')" 
                style="cursor:pointer;"/>
            </td>
            <td align="center">
                <span style="display:none;">
                    <input type="checkbox" name="place1[]" value="2" id="place1_2"/>
                </span>
                <img id="Imageplace1_2" 
                src="unchecked.jpg" 
                width="35" 
                height="35" 
                onclick="CheckBoxClicked('place1_2')" 
                style="cursor:pointer;"/>
            </td>
            <td align="center">
                <span style="display:none;">
                    <input type="checkbox" name="place1[]" value="3" id="place1_3"/>
                </span>
                <img id="Imageplace1_3" 
                src="unchecked.jpg" 
                width="35" 
                height="35" 
                onclick="CheckBoxClicked('place1_3')" 
                style="cursor:pointer;"/>
            </td>
            <td colspan="2" align="center">
                <span style="display:none;">
                    <input type="checkbox" name="place1[]" value="4" id="place1_4"/>
                </span>
                <img id="Imageplace1_4" 
                src="unchecked.jpg" 
                width="35" 
                height="35" 
                onclick="CheckBoxClicked('place1_4')" 
                style="cursor:pointer;"/>
            </td>
        </tr>


php code :

        if(isset($_POST['answeres'])) {
            $place1[0] = (@$_POST['place1'][0]=='1')? $_POST['place1'][0]:'0';
            $place1[1] = (@$_POST['place1'][1]=='1')? $_POST['place1'][1]:'0';
            $place1[2] = (@$_POST['place1'][2]=='1')? $_POST['place1'][2]:'0';
            $place1[3] = (@$_POST['place1'][3]=='1')? $_POST['place1'][3]:'0';
            echo $place1[0]; //I get 1 if checked 0 if unchecked
            echo $place1[1]; //I get 0 all the time
            echo $place1[2]; //I get 0 all the time
            echo $place1[3]; //I get 0 all the time
        }                

javascript code :

var CheckBoxCheckedImage = new Image();
var CheckBoxUncheckedImage = new Image();


CheckBoxCheckedImage.src = "checked.jpg";
CheckBoxUncheckedImage.src = "unchecked.jpg"; 
   
function CheckBoxClicked(CheckBoxid) {
           
    if(document.getElementById(CheckBoxid).value == "on"){
    //if(document.getElementById(CheckBoxid).checked) {
        document.getElementById(CheckBoxid).checked = false;
        document.getElementById("Image"+CheckBoxid).src = CheckBoxUncheckedImage.src;
    }
    else{
        document.getElementById(CheckBoxid).checked = true;
        document.getElementById("Image"+CheckBoxid).src = CheckBoxCheckedImage.src;     
    }
}


Can anyone help? I can't figure it out....

