Javascript 单击div切换复选框并更改css

我有一个由许多div构建的站点。几乎所有div都有相同的类（对于CSS）和不同的id。下面是代码的一部分：

<div class="box" id="testbox">
<img src=""><br>
Name<br><input name="choice" value="1" id="name" type="checkbox" onchange="onCheckboxChanged(); checkTotal();">
</div>

名称

当我点击这个div中的任何地方时，我想勾选/取消勾选它的复选框（它是隐藏的，所以不能点击），这将切换onCheckboxChanged（）（解锁更多复选框）和checkTotal（）（从选中的复选框中添加值）。正因为如此。单击的div必须首先检查复选框是否已启用，然后选中/取消选中它。我还希望它只改变这个div的背景。我更喜欢只使用html/css/js的解决方案。

您需要的是。用它代替你的div，它基本上会满足你的需要。您可以使用复选框上的

disabled

属性来启用/禁用它们

document.getElementById("testbox").onclick = function(e){
    var nameCheck = document.getElementById("name");
    nameCheck.checked = !nameCheck.checked;
    nameCheck.onchange();
}

---

-您可以这样做，但我认为在div上使用隐藏复选框而不是属性可能是多余的。

堆栈溢出不是要求“解决方案”的地方。这是为了帮助找到解决办法。告诉我们，您至少尝试过编写一些javascript或jquery来解决这个问题。实际上，我所需要的只是从div切换到标签。当然，在这里发布这个问题之前，我已经写过onCheckboxChanged（）和checkTotal（）。抱歉误传。Co-label的行为类似于div，但请给我更多选项，如onclick=“toggleCheckbox（'name'）；”？@Hayaku我建议您尝试一下并阅读一些关于它的文档。根据经验，无论何时使用表单元素（input、select、textarea），都应该使用label元素，但在这种情况下，它将进一步帮助您。当您单击标签时，关联的表单元素也会收到单击（提示：即使它是隐藏的）。这也会有帮助：在将div切换到标签后，我可以完成所有需要的操作。谢谢@Hayaku探索了所有HTML5元素，其中有一些非常有用；）。

$('.box').click(function(){

   if($(this).find('input[type=checkbox]').is(':checked'))
        {
            $(this).find('input[type=checkbox]').removeAttr('checked');
            /// do other stuffs
        }
   else
        { 
            $(this).find('input[type=checkbox]').attr('checked','checked');
            /// do other stuffs
        }
});