一.单选框基础

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效果:
    在这里插入图片描述
  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>
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐