1.如何修改單選按鈕的css樣式
2. 如何只選中眾多按鈕中的一個按鈕
3. jquery中關(guān)于單選按鈕的一些操作
- 如何獲取單選框的值
- 如何設(shè)置單選框選中項
（這些內(nèi)容都是我在寫項目時 在性別選擇上遇到的一些困難养晋，希望能幫助到大家）
單選框的CSS樣式修改
性別選擇框
普通按鈕
最終做出來是這樣的樣式 是不是比普通的單選按鈕好看了很多？梁钾！
首先 我們創(chuàng)建兩個radio
<input type="radio" id="female">女
<input type="radio" id="male">男
我們得到了兩個普通按鈕
普通按鈕
修改代碼
<input type="radio" id="female"><span></span>
<input type="radio" id="male"><span></span>
修改css
1.隱藏單選按鈕框
input{
display:none;
}
-
span是我們要放我們圖片的地方 修改其css樣式以便適應(yīng)我們的按鈕大小
(改塊內(nèi)容僅做參考,主要是input[type=radio]+span)
input[type=radio]+span {
width: 40px;
height: 40px;
display: inline-block;
margin-right: 5px;
background-size: cover;
}
2.為各個按鈕添加圖片
#female[type=radio]+span{
background-image: url("../res/girl.png");
background-repeat: no-repeat;
}
#male[type=radio]+span{
background-image: url("../res/boy.png");
background-repeat: no-repeat;
}
3.最后我們還可以添加選中時的樣式
input[type=radio]:checked+span{
border: 1px solid #ffffff;
border-radius: 5px;
}
最后運行就得到了我們想要的單選樣式
注意：多選框的修改可以參考單選框 只要將[type=radio]改為[type=checked]即可绳泉！
其實在最后點擊時還出現(xiàn)了一些問題 兩個單選框都可以選擇!!!
我們只要在每個單選框中 加入name="sex"即可
相同name的單選框組 只能選擇其中的一個
最后問題解決！Ｄ沸骸零酪！
jq中的一些操作 請至單選按鈕問題（二）
