不带复选框的表单post ID的Javascript集合

我正在设计一个需要将一组ID发布到php脚本的页面

有一个表，其中包含许多要选择的项目（带有关联的图像）。过去的做法是在每个项目旁边放一个复选框并发布表单，然后使用php循环表单发布

但设计要求“不要使用复选框”。其思想是，当用户单击其中一个项目时，该项目将在CSS中突出显示，然后一个按钮将发布所有突出显示的项目

html如下所示：

<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>

css：

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

关于如何在没有jquery的情况下使用？

var group=document.getElementById（“组”），
elements=group.getElementsByTagName（“div”）；
group.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
如果（“DIV”==e.target.tagName）{
如果（“选定”==e.target.className）{
e、 target.classList.remove（“选定”）；
}否则{
e、 target.classList.add（“选定”）；
}
}
});
#组分区{
光标：指针；
}
.选定{
背景色：#C0；
}

第一组
第二组
第三组
我可能没有很清楚地解释我想要什么，所以我选择了自己的解决方案：

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';
    }
}

function checkItem(clicked, Id){
    //clicked is the table element that was clicked 
    //Id is the id of the hidden var

    //get the current css class of the table element
    var cur = document.getElementById(clicked).className;

    //flip the css class and update form
    if (cur == 'primaryCl')
    {
        document.getElementById(clicked).className = 'secondaryCl';

        //set form var to 'true' for form post
        document.getElementById(Id).value = 'true';
    }
    else
    {
        //reverse of the above
        document.getElementById(clicked).className = 'primaryCl';
        document.getElementById(Id).value = 'false';
    }
}

CSS：

.primaryCl {
    background-color: #E6E6E6;  
    border-collapse: separate;
    border-spacing: 5px;
    border:solid #6A6964 1px;
    padding: 0px; 
}
.primaryCl:hover {
    background-color: #3cb0fd;  
    cursor: pointer;
}
.secondaryCl {
    background-color: #3cb0fd;  
    border-collapse: separate;
    border-spacing: 5px;
    border:solid #6A6964 1px;
    padding: 0px; 
}

php：

/* css class set dynamically (code removed for brevity) */
$ibClass = "primaryCl";

/* hidden set dynamically (code removed for brevity) */
$hiddenTag = "<input type=\"hidden\" name=\"tp_$Id\" id=\"tp_$Id\" value=\"$hiUpd\">";


/* inside while loop, looping through query results */
$out .= "
  <td>
    $hiddenTag
    <table id=\"cp_$Id\" class=\"$ibClass\" onclick=\"checkItem('cp_$Id', 'tp_$Id');\"> 
        <tr>
            <td>
                <img alt=\"pic\" height=\"70\" width=\"60\" src=\"$thumbnailDir/$imageMini\" />
            </td>
            <td>
                <span class=\"b12\">$prodName</span>
            </td>
        </tr>
    </table>
</td>";

/*动态设置css类（为简洁起见删除代码）*/
$ibClass=“primaryCl”；
/*动态隐藏集（为简洁起见删除代码）*/
$hiddenTag=“”；
/*在while循环内，循环查询结果*/
$out.=”
$hiddenTag
$prodName
";
如果您不想使用jQuery，为什么要用它标记您的问题？如果用户选择了一个项目，而他们想要取消选择，您可以这样做，他有什么选择？“然后一个按钮将发布所有突出显示的项目。”-按钮是否与任何表单关联？”传统做法是在每个项目旁边放置一个复选框并发布表单，然后使用php循环表单发布。”-与此相反的是newb school，在那里人们会尝试通过JavaScript“解决”这个问题，而不是使用CSS使复选框不显示，而是保持其功能性和可访问性，并使用：checked pseudo class and nexting sibling combinator…*1突出显示关联的图像同级。我想了解一下使用jquery和不使用jquery的解决方案*2用户可以通过单击任何项目来“选择”或“取消选择”。css高亮显示使项目是否已被选中变得明显*3按钮与所有项目一样包装在表单中*4如果使用复选框和标准html表单，则不需要Javascript。但这不是设计所需要的。Stoycho Trenchev，代码中有一些好的想法，但是项目列表的长度未知。我给你的答案符合你的问题。选中的元素将高亮显示，您可以使用添加的类获取所有元素，该类标记该元素已选中。但我想最好是把你自己的答案标记为好的：）原始问题是“当用户点击其中一个项目时，该项目在CSS中突出显示，然后一个按钮将发布所有突出显示的项目”。您的答案没有针对表单帖子，这就是CSS高亮显示切换的原因。除非我遗漏了什么？这个按钮和表单在您的解决方案中在哪里？htlm是由上面的php代码动态生成的，并由一个简单的表单标记包装，在“提交”中有一个按钮，但它不在您的答案中！因为它不在我的房间里。如果你要的是表格的话，那就太好了。我刚做出选择。然后使用该类获得选定的元素。