HTML基础1：单选框

一.单选框基础

1.基本写法：<input type=“radio” / >
2.实现默认选中，使用checked。
3.若存在多个单选框都在一个分组里，要实现同一时间只能选中一个单选框设置name属性相同即可。
4.提交数据到后台时，后台接收的是value设置的值

二.案例

目标：利用JQuary，点击单选框时将当前单选框设置为checked。(初始化时设置第一个单选框为checked状态)

1. html代码

<div  id="radioDiv">
		    <label>气&nbsp;体&nbsp; :</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>

2. html效果：
   
3. 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>