如何定义一个单选框
<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>
