zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    [iOS]swift版内购
    [iOS]UIScrollView左右拨动,第二页宽度只有一半问题
    [iOS]UIScrollView嵌套内容在左右拨动的时候自动被顶上问题
    [Android]RecyclerView添加HeaderView出现宽度问题
    [iOS]swift之UITableView添加通过xib创建的headerView坑爹问题
    [iOS]隐藏导航栏把右滑退出操作保留
    [iOS]使用autolayout的时候会有明明设置和父视图左右间距为0但却还有空隙问题
    [iOS]改变状态栏颜色
    [iOS]UIScrollView嵌套UITableView,超出屏幕的cell点击不了问题
    sublime text 3快速生成html头部信息
  • 原文地址:https://www.cnblogs.com/dingyufenglian/p/3613965.html
Copyright © 2011-2022 走看看