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>
  1. html效果:
    HTML基础1:单选框
  2. 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>
上一篇:ASP.NET javascript实现选择功能


下一篇:原生JS写点击事件