一.单选框基础
1.基本写法:<input type=“radio” / >
2.实现默认选中,使用checked。
3.若存在多个单选框都在一个分组里,要实现同一时间只能选中一个单选框设置name属性相同即可。
4.提交数据到后台时,后台接收的是value设置的值
二.案例
目标:利用JQuary,点击单选框时将当前单选框设置为checked,同时初始化第一个单选框为checked状态。
- html代码
<div id="radioDiv">
<label>气 体 :</label>
<label >
<input type="radio" name="value" value="NO" checked='checked'>NO<sub>2</sub>
</label>
<label >
<input type="radio" name="value" value="HF">HF
</label>
<label >
<input type="radio" name="value" value="O2">O<sub>2</sub>
</label>
<label >
<input type="radio" name="value" value="O3">O<sub>3</sub>
</label>
<label >
<input type="radio" name="value" value="NO2">NO<sub>2</sub>
</label>
<label >
<input type="radio" name="value" value="SO2">SO<sub>2</sub>
</label>
<label >
<input type="radio" name="value" value="CO">CO
</label>
</div>
- html效果:
- jq代码:
<script>
$("#radioDiv input[type='radio']").click(function(){
//1.先移除之前元素的checked
$("#radioDiv input[type='radio']:checked").removeAttr("checked");
//2.给当前点击的单选框加checked
$(this).attr("checked","true")
//3.测试打印值
console.log($("#radioDiv input[type='radio']:checked").val())
})
</script>