點選文字選中或取消選中checkbox核取方塊

admin發表於2020-03-12

核取方塊的基本知識參閱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>

用巢狀方式可以省卻不少的程式碼，看著更加簡潔。

相關文章