checkbox控制显示隐藏

显示文本框
<input type = "checkbox" id="checkbox" onclick="on_hide();"/><input type = "text" id="hide" style="display:none;"/>
<script>
function on_hide(){
document.getElementById("hide").style.display = (document.getElementById("checkbox").checked == true) ? "block" : "none";
}
</script>

点击显示说明文字即可选择/取消勾选状态
web开发中，由于checkbox比较小用户操作起来不是很方便，为了方便用户对checkbox操作我们可以让用户点击说明文字时即可实现选择/勾选 checkbox

下面使用一种简单的方法实现

代码实现如下：
<input id="ck1" type="checkbox" />

复制代码代码如下:
<label for="ck1">点击我即可选择/取消勾选状态</label>

label:
说明文字标签必须为 label
for 指定需要联动checkbox的id

案例
<tr><td colspan="6"><input type = "checkbox" id="checkbox" onclick="on_hide();"/>是否申请实现担保物权</td></tr>
               <tr >
                   <td colspan="6">
                   <script>
                   function on_hide(){
                      document.getElementById("hide").style.display = (document.getElementById("checkbox").checked == true) ? "block" : "none";
                   }
                   </script>
                   <label for="f_outer" id="hide" style="display:none;">
                   <table width="807" border="0">
                      <tr>
                       <td align="right" width="13%">审判法官</td>
                       <td width="22%"><input name="faguan" id="faguan" type="text" /></td>
                       <td width="9%" align="right">开庭时间</td>
                       <td colspan="3"><input onfocus="calendar()" type="text" class="time" id="kttime" name="kttime"/></td>
                      </tr>
                      <tr>
                       <td align="right">申请执行时间</td>
                       <td><input onfocus="calendar()" type="text" class="time" id="sqzhixingshijian" name="sqzhixingshijian"/></td>
                       <td align="right">执行案号</td>
                       <td width="22%"><input name="zhixinganhao" id="zhixinganhao" type="text" /></td>
                       <td width="11%" align="right">执行法官</td>
                       <td width="23%"><input type="text" name="zhixingfaguan" id="zhixingfaguan" /></td>
                      </tr>
                   </table>
                   </label>


                   </td>
               </tr>