Question

我有一个由许多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的解决方案。

Answer 1

您需要的是label element。使用它而不是你的div，它基本上会做你需要的。您可以使用复选框上的disabled属性启用/禁用它们。

Answer 2

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

jsfiddle - 你可以做这样的事情，虽然我认为使用隐藏的复选框而不是div上的属性可能是多余的。

Answer 3

$('.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
        }
});

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

3 个答案: