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


  • 相关阅读:
    NFC读写电子便签总结
    对字符串md5加密
    把ArrayList集合中的字符串内容写到文本文件中
    【原创】关于jquery实现格式化时间
    jQuery插件之ajaxFileUpload
    jxl读取excel实现导入excel写入数据库
    jxl写入excel实现数据导出功能
    多个Jar包的合并操作
    基于git的源代码管理模型——git flow
    Google Gson 使用简介
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314203.html
Copyright © 2011-2022 走看看