這時要對checkbox進行處理

我總結的一個方法就是根據(jù)checked去進行設置

例子：

 p  input name= area type= checkbox html' target='_blank'>value= 1 id= check1 /  label for= check1 橋西區(qū) /label  /p 

這里我把checkbox和label寫在p標簽里，這樣既可以實現(xiàn)點擊文字選中。

選中后樣式控制：

/*選礦*/ .select-ul li p label, .type-list-ul li p label{ font-size: 0.28rem;color: #666; width: 100%;height: 100%;display: inline-block; border-color: #666; border-style: solid; border-width: 1px; border-radius: 0.1rem; .type-list-ul li p label{width: auto;padding: 0 0.1rem;} .select-ul li p{ height: 0.5rem; width: 1.5rem; display: inline-block; line-height: 0.5rem; .type-list-ul li p{ /*padding: 0 0.1rem;*/ height: 0.5rem; /* width: 1.5rem; */ display: inline-block; line-height: 0.5rem; .select-ul li p input[type=checkbox]:checked + label, .type-list-ul p input[type=checkbox]:checked + label{ border-color: #FA8072; color: #FA8072; }

總結就是我通過

 .select-ul li p input[type=checkbox]:checked + label{}

來控制樣式，

一般區(qū)域選擇都會使checkbox樣式隱藏，只留下字體框，點擊后變色來提高用戶體驗

拓展：

在做網頁的時候一般會有一個需求：點擊一段文字信息的同時選中某個checkbox

舊處理方式是在這段文字上加上點擊事件觸發(fā)checkbox的選中事

//jq中：//選中$( #ID ).attr( checked , checked //不選中$( #ID ).removeAttr( checked //js中： var boxes = document.getElementsByName( test boxes[i].checked = true;

這里提供一種便利的方法：

 p  input name= fittype type= checkbox value= 8 id= checkin8 /  label for= checkin8 其他 /label /p 

將input和label放在同一個標簽p中同時lable的for屬性的值等于input的id屬性值就可以實現(xiàn)點擊label同時控制input

以上就是html中關于checkBox選中樣式設置的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。