您的位置:首頁> 實例代碼> HTML實例

點擊文本選中或取消選中checkbox復選框

2020-3-12 20:20| 作者: admin| 查看: 308| 評論: 0|來自: 螞蟻部落

復選框的基本知識參閱HTML input checkbox 復選框一章節。

點擊復選框可以實現其選中和取消選中操作,這是其基本功能。

在很多應用中,點擊復選框附近的文本也可以實現上述功能,下面做一下介紹。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.kolabortv.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.kolabortv.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>

用嵌套方式可以省卻不少的代碼,看著更加簡潔。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
亚洲骑兵 - 东方AV在线,我想看美女下面的毛,大香蕉一本道久在线 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>