HTML radio 或者 checkbox 获取状态为选中的元素的值

_IT民工

于 2017-03-01 14:13:10 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： radio checkbox 选中 html

本文链接：https://blog.youkuaiyun.com/liuhailiuhai12/article/details/59104274

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用jQuery来获取HTML中被选中的单选按钮的值，提供了多种方法实现这一目标，包括直接选择已选中的按钮、通过属性过滤器选择、使用filter方法以及遍历元素集合。

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

<tbody>
	<tr>
		<td><label for="invert">彩色模式： </label></td>
		<td>
			<label><input type="radio" name="colormode" id="coloroff" class="radio" value="关" checked="checked"> 关</label>
			<label><input type="radio" name="colormode" id="coloron" class="radio" value="开"> 开</label>
		</td>
	</tr>
</tbody>

1. $('.radio:checked')

2. $('input[type^=radio]:checked')

3. $('.radio').filter(':checked')

4. 使用each

具体的 HTML 和 jQuery 代码这里贴一下代码：

$(document).ready(function(){
	
	$("#btn_1").click(function(){
		alert($('.radio:checked').val());
	});
	
	$("#btn_2").click(function(){
		alert($('input[type^=radio]:checked').val());
	});
	
	$("#btn_3").click(function(){
		alert($('.radio').filter(':checked').val());
	});
	
	$("#btn_4").click(function(){
		$('.radio').each(function(){  
			if($(this).is(":checked")){  
				alert($(this).val()+" 选中");  
			}else{  
				alert($(this).val()+" 没选中");  
			}  
		})  
	});

});