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>

  • 相关阅读:
    typescript提示implicitly has an 'any' type 问题
    element-ui中的table可分页多选功能-记住上一页勾选数据
    CSS加载会阻塞页面显示?
    网络流(EK算法)
    网络流(dinic算法)
    洛谷p1120小木棍(剪枝优化)
    三种背包模板
    HDU2089-不要62(数位dp)
    windy数(数位dp)
    素数判定(待填坑)
  • 原文地址:https://www.cnblogs.com/dingyufenglian/p/3613965.html
Copyright © 2011-2022 走看看