Question

我无法选中以下代码中的复选框。如果<input type="checkbox..位于<div>之外，则可以正常工作，而不是<div>

知道为什么。

<div id="SEL">

  <div style="position:relative; width:100%; height:30px; background-color:#FF5300; bottom:1px;">

     <input type="checkbox" name="test" value="test" style="position:relative; top:5px; left:10px;">

  </div>

</div>

Answer 1

我无法重现你的问题。我可以选中复选框：http://jsfiddle.net/4ugPj/

如果要通过单击橙色区域选中复选框，请将其设为LABEL元素而不是DIV：http://jsfiddle.net/4ugPj/1/

Answer 2

使用label因为，该元素不会呈现给用户任何特殊的东西。但是，它为鼠标用户提供了可用性改进，因为如果用户单击元素中的文本，它将切换控件。

标记的for属性应该等于相关元素的id属性以将它们绑定在一起。

        for example

         <div id="SEL">
         <label style="display:block; position:relative; width:100%; height:30px; background-color:#FF5300; bottom:1px;" for="check">
         <input type="checkbox" name="test" value="test" style="position:relative; top:5px; left:10px;" id="check">
         </label>
         </div>

无法检查<div>中的复选框，但在</div>之外可以很好地工作

2 个答案: