Javascript 使用div元素作为复选框

我目前正在构建一个我更喜欢使用div元素作为复选框的站点。 如果选中该复选框类，则使用javascript切换该复选框类

$(".menuGroup").click(function() {
   $(this).toggleClass("btnOn");
});

这是html

<div class='col span_1_of_6 menuGroup'>
    <div class="circl3" style="background-image:url(images/icons/'.$icon.') background-repeat:no-repeat;"></div>
    <p class='menuGroupName'>$items</p>
</div>

下面是处于两种状态的div元素。已选择和未选择。

我希望在单击Submit按钮时将

元素名称提交到下一页

---

还有更好的替代方法吗？

生成隐藏复选框并添加

onchange

处理程序以更改伪复选框的状态。 隐藏复选框将提交到下一页

或

---

只查看CSS3如何使用javascript。您可以查看每个元素并选择所选元素并发送响应

$(".menuGroup").click(function() {
   $(this).toggleClass("btnOn");
});

$('.menuGroup').each(function() {
    if ($(this).hasClass('btnOn')) {
        // Save element to send
    }
});

---

您所说的元素名称是什么意思<代码>标记没有

名称属性。对不起，我的错误。应提交项目名称（$items）。再次抱歉。可能是重复的是。我考虑过这种可能性。但是还有其他的可能性吗？