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


  • 相关阅读:
    Mybatis异常There is no getter for property named 'XXX' in 'class java.lang.String'
    js javascript 容错处理代码屏蔽js错误
    springmvc访问项目默认先访问后台再返回首页
    杂记-格式化Date默认格式,日期加一天,jstl判断字符类型,ajax模拟from表单后台跳转页面,jstl访问数据库并在页面显示
    测试覆盖率工具EclEmma安装与使用
    GSON使用之对特殊字符的转换的处理
    eclipse启动自己添加的tomcat时tomcat的webapps下没有项目
    接口和抽象类
    枚举
    Java异常
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314203.html
Copyright © 2011-2022 走看看