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


  • 相关阅读:
    Windows 8 自带定时关机的4种实现方法
    Windows 7/8 自带定时关机命令
    将博客搬至CSDN
    【贪心】【POJ-3637】Shopaholic
    【贪心】【POJ-2437】Muddy roads
    【贪心】【POJ-1328&AOJ-195】Radar Installation
    【贪心】【POJ-1456】Supermarket
    【贪心】【HDOJ-1789】Doing Homework again
    【贪心】【POJ-1992】Ride to School
    【贪心】【POJ-1018】Communication System
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314203.html
Copyright © 2011-2022 走看看