HI,欢迎您光临Downzz,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!
当前位置:首页 > 站长教程 > 建站经验 > HTML教程 > 点击文本选中或取消选中checkbox复选框_HTML实例

点击文本选中或取消选中checkbox复选框_HTML实例

时间:2020-03-19人气:403来源:原创我要评论(0)

复选框的基本知识参阅HTML input checkbox 复选框一章节。

点击复选框可以实现其选中和取消选中操作,这是其基本功能。

在很多应用中,点击复选框附近的文本也可以实现上述功能,下面做一下介绍。

代码实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.downzz.com/" />  
<title>Downzz.com</title>  
</head> 
<body>
<form> 
  <input type="checkbox" id="a" >
  <label for="a">Downzz.com一</label>
  <br>
  <input type="checkbox" id="b" > 
  <label for="b">Downzz.com二</label>
  <br>
  <input type="checkbox" id="c" >
  <label for="c">Downzz.com三</label>
</form>
</body> 
</html>

上述代码实现了点击对应文本能够选中或者取消选中复选框效果。

简单分析如下:

(1).通过<label>标签使文本与复选框关联起来。

(2).设置<label>标签的for属性值与复选框的id属性值相同即可。

也可以将复选框嵌套在<label>中,代码如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.downzz.com/" />  
<title>Downzz.com</title>  
</head> 
<body>
<form> 
  <label><input type="checkbox"> Downzz.com一</label>
  <br>
  <label><input type="checkbox"> Downzz.com二</label>
  <br>
  <label><input type="checkbox"> Downzz.com三</label>
</form>
</body> 
</html>

用嵌套方式可以省却不少的代码,看着更加简洁。

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 正则提取车牌最后一位数字_正则实例

    车牌的最后一位之所以特殊,是因为经常利用它制定一些规则。比如北京这种车辆保有量大的城市,会使用最后一位数字指定规则限行。下面分享一段正则代码,实现了匹配车牌最后一位数字的功能。代码如下:/\d(?!.*\d)/代码简单分析如下:(1).\d
  • 匹配商品条形码正则表达式代码_正则实例

    商品条形码具体是什么东西没有研究过。通过谷歌或者百度能够找到关于它的详细介绍。但是国内的条形码基本规则如下:(1).总共13位数字。(2).前两位数字规定是69。正则表达式代码如下:/^69\d{11}$/比较简单不多介绍,更多内容参阅如下

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号-4 | 浙公网安备 42011102000245号工信部

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!