zoukankan      html  css  js  c++  java
  • 单选按钮和标签组合点击

    1、问题背景

         现在,有个问题:一组单选按钮,点击按钮可以选中,但是点击标签label不能被选中。


    2、实现源码

    (1)点击按钮选中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>单选按钮和标签组合点击</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript">
    
    </script>
    </head>
    
    <body>
       <div>
          <input type="radio" id="man" name="sex" style="cursor:pointer"/>
          <label style="cursor:pointer">男</label>
          <input type="radio" id="woman" name="sex" style="cursor:pointer"/>
          <label style="cursor:pointer">女</label>
       </div>
    </body>
    </html>
    

    (2)点击label选中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>单选按钮和标签组合点击</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript">
    
    </script>
    </head>
    
    <body>
       <div>
          <input type="radio" id="man" name="sex" style="cursor:pointer"/>
          <label style="cursor:pointer" for="man">男</label>
          <input type="radio" id="woman" name="sex" style="cursor:pointer"/>
          <label style="cursor:pointer" for="woman">女</label>
       </div>
    </body>
    </html>
    

    (3)点击label选中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>单选按钮和标签组合点击</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript">
    
    </script>
    </head>
    
    <body>
       <div>
          <label style="cursor:pointer"><input type="radio" id="man" name="sex" style="cursor:pointer"/>
          男</label>
          <label style="cursor:pointer"><input type="radio" id="woman" name="sex" style="cursor:pointer"/>
          女</label>
       </div>
    </body>
    </html>
    

    3、实现结果

    (1)点击按钮选中



    (2)点击按钮和label选中



    (3)点击按钮和label选中


  • 相关阅读:
    Virtual Studio 2010在Release模式下进行调试的设置方法
    OpenGL Shader
    OGRE的安装编译
    开源GIS平台空间数据管理与发布技术研究
    风靡世界的小游戏2048源代码
    成为优秀程序员的几个阶段
    颜色空间模型(HSVLABRGBCMYK)
    希望自己的博客被知名搜索引擎收录的网址
    我的第一篇博客
    当你的善良受到委屈时
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314203.html
Copyright © 2011-2022 走看看