无法检查<div>中的复选框，但在外面工作得非常好

I am unable to check the checkbox in the below code. If <input type="checkbox.. is placed outside the <div> it works fine and not inside the <div>

Any idea why.

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

I cannot reproduce your problem. I can check the checkbox just fine: http://jsfiddle.net/4ugPj/

If you want to check the checkbox by clicking on the orange area, make it a LABEL element and not a DIV: http://jsfiddle.net/4ugPj/1/

use label because , the element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.

The for attribute of the tag should be equal to the id attribute of the related element to bind them together.

        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>