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

最新推荐文章于 2024-02-27 14:46:01 发布

原创最新推荐文章于 2024-02-27 14:46:01 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#radio #checkbox #选中 #html

HTML 专栏收录该内容

5 篇文章

订阅专栏

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

<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()+" 没选中");  
			}  
		})  
	});

});

分享到：新浪微博腾讯微博 QQ空间人人网豆瓣网一键分享 0