I'm designing a page which needs to post a set of IDs to a php script.

There is a table with a number of Items (with associated images) to select. Old school would be to put a check box next to each Item and post the form, then loop through the form post with php.

But the design is requesting that "no checkboxes be used". The idea being that when a user clicks one of the Items, that item gets highlighted in CSS then a button will post all the highlighted items.

The html looks like this:

```
<td>
    <table id="cell-5" class="change_back" onclick="checkItem('cell-5',5);"> 
        <tr>
            <td>
                <img src="img/5.png" />
            </td>
        </tr>
    </table>
</td>
<td>
    <table id="cell-6" class="change_back" onclick="checkItem('cell-6',6);"> 
        <tr>
            <td>
                <img src="img/6.png" />
            </td>
        </tr>
    </table>
</td>
<td>
    <table id="cell-7" class="change_back" onclick="checkItem('cell-7',7);"> 
        <tr>
            <td>
                <img src="img/7.png" />
            </td>
        </tr>
    </table>
</td>

```

Javascript:

```
function checkItem(clicked, prdId){
    alert(prdId + ' was selected');
    var cur = document.getElementById(clicked).className;

    //if not highlighted
    if (cur == 'change_back'){
        //add item
        document.getElementById(clicked).className = 'change_back_clicked';
    }
    else{
        //remove item
        document.getElementById(clicked).className = 'change_back';
    }
}

```

the css:

```
.change_back {
    background-color: #FFFFFF;  
}
.change_back:hover {
    cursor: pointer;
}
.change_back_clicked {
    background-color: #C0C0C0;  
}

```

Thoughts on how to do this without jquery and with?