您的位置:首页> 实例代码> HTML实例

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

2020-3-12 20:20| 作者: admin| 查看: 1255| 评论: 0|来自: 蚂蚁部落

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

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
</head> 
<body>
<form> 
  <input type="checkbox" id="a" >
  <label for="a">蚂蚁部落一</label>
  <br>
  <input type="checkbox" id="b" > 
  <label for="b">蚂蚁部落二</label>
  <br>
  <input type="checkbox" id="c" >
  <label for="c">蚂蚁部落三</label>
</form>
</body> 
</html>

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

简单分析如下:

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

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

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>  
</head> 
<body>
<form> 
  <label><input type="checkbox"> 蚂蚁部落一</label>
  <br>
  <label><input type="checkbox"> 蚂蚁部落二</label>
  <br>
  <label><input type="checkbox"> 蚂蚁部落三</label>
</form>
</body> 
</html>

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部