html自定義修改單選框多選框樣式以及獲取選中的值
阿新 • • 發佈：2021-01-16
如何定義一個單選框
<input type="radio" name="sex" id="male" value="1" />
定義type，一組單選框的name值是相同的，定義id可以讓label標籤指向這個元素，value是我們賦予這個單選框我們需要的值
單選框是有預設樣式的無法被修改，只能將他隱藏通過label標籤來模擬新的樣式
程式碼如下：
<style>
input[type='radio'][name='sex']{display: none;}/* 隱藏預設單選框用label來模擬 */input[type='radio'][name='sex']+label:after{/* 給label標籤新增自定義樣式 */
content: '';
display: inline-block;
margin-left: 10px;
width: 10px;
height: 10px;
border: 1px solid #0000CC;
}
input[type='radio'][name='sex']:checked+label:after{background-color: #0000CC;}/* 選中樣式 */
</style><section>這裡是單選框</section>
<input type="radio" name="sex" id="male" value="1" />
<label for="male">男</label>
<br />
<input type="radio" name="sex" id="female" value="0" /><label for="female">女</label>
獲取選中的單選框的值：
document.querySelector("input[type=radio][name=sex]:checked").value
多選框也是同理，下面將完整操作單選框和多選框程式碼貼出來
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<style>
input[type='radio'][name='sex']{display: none;}/* 隱藏預設單選框用label來模擬 */
input[type='radio'][name='sex']+label:after{/* 給label標籤新增自定義樣式 */
content: '';
display: inline-block;
margin-left: 10px;
width: 10px;
height: 10px;
border: 1px solid #0000CC;
}
input[type='radio'][name='sex']:checked+label:after{background-color: #0000CC;}/* 選中樣式 */
</style>
<section>這裡是單選框</section>
<input type="radio" name="sex" id="male" value="1" />
<label for="male">男</label>
<br />
<input type="radio" name="sex" id="female" value="0" />
<label for="female">女</label>
<button onclick='alert(document.querySelector("input[type=radio][name=sex]:checked")?document.querySelector("input[type=radio][name=sex]:checked").value:"你還沒有選擇")'>獲取選中的值</button>
</div>
<div>
<style>
input[type='checkbox'][name='hobby']{display: none;}/* 隱藏預設多選框用label來模擬 */
input[type='checkbox'][name='hobby']+label:after{content: '';display: inline-block;margin-left: 10px;width: 10px;height: 10px;border: 1px solid #0000CC;}
input[type='checkbox'][name='hobby']:checked+label:after{background-color: #0000CC;}/* 選中樣式 */
</style>
<section>這裡是多選框</section>
<input type="checkbox" name="hobby" id="basketball" value="我愛打籃球" />
<label for="basketball">籃球</label>
<br />
<input type="checkbox" name="hobby" id="swim" value="我愛游泳" />
<label for="swim">游泳</label>
<br />
<input type="checkbox" name="hobby" id="book" value="我愛看書" />
<label for="book">看書</label>
<!-- 與單選框的處理幾乎一樣，只是取資料的時候多做一些處理 -->
<!-- 判斷是否獲取到checked的多選框時，querySelector無值時返回null，視為false,querySelectorAll返回空陣列[],視為true，前者做判斷更方便 -->
<!-- 邏輯：將選中的值放到一個字串中（也可以是陣列），獲取到選中多選框元素時用forEach迴圈把值拼起來，forEach本身無返回值即undefined，所以用|| -->
<button onclick='myHobby="";alert(document.querySelector("input[type=checkbox][name=hobby]:checked")?document.querySelectorAll("input[type=checkbox][name=hobby]:checked").forEach(item=>myHobby+=item.value+",")||window.myHobby:"你還沒有選擇")'>獲取選中的值</button>
</div>
</body>
</html>