• 单选按钮和标签组合点击


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


  • 相关阅读:
    msyql 死锁
    yii2 操作数据库
    yii2 加载静态资源
    Yii2 之 UrlManager 实践 (一)
    Wordpress 之 Rewrite Rules
    yii2 使用gii生成代码文件
    权限设计的杂谈
    NodeJS —— 自定义流的实现
    浅析递归
    请将你的App签名文件放进保险箱
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314203.html
Copyright © 2020-2023  润新知