jQuery操作单选框(radio)和复选框(checkbox)汇总

最新推荐文章于 2023-03-10 10:41:04 发布

AB小站

最新推荐文章于 2023-03-10 10:41:04 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Allan_Bst/article/details/79748309

前端专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细介绍了如何使用jQuery操作Checkbox和Radio。对于Checkbox，涵盖了取值（获取所有选中、指定name和id的选中值）和赋值（根据value和name+id选中）的操作。而对于Radio，讲解了获取选中值和根据值选中特定Radio的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.操作Checkbox

<1> 取值操作

1.获取所有CheckBox选中的值

(1)这是前端的所有CheckBox

(2)这是取值操作的js,这里把值放到一个数组里

<script type="text/javascript">
	function test(){
		var datas = [];
		$.each($("input:checkbox:checked"),function(){
			datas.push($(this).val());
		});
		console.info("值:"+datas);
	}
</script>

(3)控制台输出数值

2.获取指定name值的CheckBox选中的值

(1)前端代码,这里那后两个CheckBox的name更改为了drunk

(2)js代码中指定取name为drunk的选中的CheckBox的值

<script type="text/javascript">
	function test(){
		var datas = [];
		$.each($("input:checkbox[name='drunk']:checked"),function(){
			datas.push($(this).val());
		});
		console.info("值:"+datas);
	}
</script>

(3)控制台输出数值

值:3,4

3.获取指定name和id值的CheckBox选中的值

(1)前端代码,这里那后两个CheckBox的name更改为了drunk和id改为了test2

<div id="test">
	 	<label><input type="checkbox" id="test" name="fruit" value="1">苹果</label>
	 	<label><input type="checkbox" id="test" name="drunk" value="2">水</label>
	 	<label><input type="checkbox" id="test2" name="drunk" value="3">可乐</label>
	 	<label><input type="checkbox" id="test2" name="drunk" value="4">橙汁</label>
 </div>

(2)js代码中指定取name为drunk并且id为test2的选中的CheckBox的值

<script type="text/javascript">
	function test(){
		var datas = [];
		$.each($("input:checkbox[name='drunk'][id='test2']:checked"),function(){
			datas.push($(this).val());
		});
		console.info("值:"+datas);
	}
</script>

(3) 控制台输出

值:3,4

<2> 赋值操作

1.赋值(选中)指定value的CheckBox

(1)前端代码,依然是4个CheckBox

 <input type="button" value = "赋值" onclick="test()">
	 <div id="test">
	 	<label><input type="checkbox" id="test" name="fruit" value="1">苹果</label>
	 	<label><input type="checkbox" id="test" name="fruit" value="2">橘子</label>
	 	<label><input type="checkbox" id="test" name="fruit" value="3">香蕉</label>
	 	<label><input type="checkbox" id="test" name="fruit" value="4">橙子</label>
	 </div>

(2)js代码,根据后台传过来的值进行选中,一般都是数值

<script type="text/javascript">
	function test(){
		var datas = [1,3,4];
		for(var i=0; i<datas.length; i++){  
			$("input:checkbox").each(function(){   
			     if ($(this).val() == datas[i]) {  
			          this.checked=true;  
			       }
			 });  
                 }  
	}
</script>

(3)界面展示,当点击赋值按钮时,会选中这些指定value的CheckBox

2.赋值(选中)指定value指定name指定id的CheckBox

这个在这里就不一一介绍了,因为同上,一通百通,没必要长篇大论了

二.操作Radio

1.获取radio选中的值

(1) 前端四个radio

 <input type="button" value = "取值" onclick="test()">
	 <div id="test">
	 	<label><input type="radio" id="test1" name="fruit" value="1">苹果</label>
	 	<label><input type="radio" id="test2" name="fruit" value="2">橘子</label>
	 	<label><input type="radio" id="test3" name="fruit" value="3">香蕉</label>
	 	<label><input type="radio" id="test4" name="fruit" value="4">橙子</label>
</div>

(2)js获取选中的值

<script type="text/javascript">
	function test(){
		var value = $("input:radio:checked").val();
		alert("选中的值:"+value);
	}
</script>

(2)js获取指定id的radio选中的值

function test(){
	var value = $("input:radio[id='test1']:checked").val();
	alert("选中的值:"+value);
}

2.根据值选中指定radio

(1) 选中指定 value 指定 name的radio

<script type="text/javascript">
	function test(){
		$("input:radio[name='fruit'][value='2']").attr("checked","checked");
	}
</script>