如何使用jQuery选择单选按钮

最新推荐文章于 2025-03-16 09:31:25 发布

cyan20115

最新推荐文章于 2025-03-16 09:31:25 发布

阅读量4.6k

点赞数 1

文章标签： javascript ViewUI

一个使用jQuery动态选择单选按钮的简单示例。

单选按钮组，名称为“ sex”。

<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>

1.显示选定的单选按钮值。

$('input:radio[name=sex]:checked').val();

2.选择一个单选按钮（男性）。
单选按钮从0开始，因此'Male'='0'，'Female'='1'和'Unknown'='2'。

$('input:radio[name=sex]:nth(0)').attr('checked',true);
or
$('input:radio[name=sex]')[0].checked = true;

3.选择单选按钮（女）。

$('input:radio[name=sex]:nth(1)').attr('checked',true);
or
$('input:radio[name=sex]')[1].checked = true;

4.选择单选按钮（未知）。

$('input:radio[name=sex]:nth(2)').attr('checked',true);
or
$('input:radio[name=sex]')[2].checked = true;

5.重置选定的单选按钮。

$('input:radio[name=sex]').attr('checked',false);

jQuery选择单选按钮示例

<html>
<head>
<title>jQuery select a radio button example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery select a radio button example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isSelect").click(function () {
		
	alert($('input:radio[name=sex]:checked').val());
			
    });
	
    $("#selectMale").click(function () {
		
	$('input:radio[name=sex]:nth(0)').attr('checked',true);
	//$('input:radio[name=sex]')[0].checked = true;

    });
	
    $("#selectFemale").click(function () {
		
	$('input:radio[name=sex]:nth(1)').attr('checked',true);
	//$('input:radio[name=sex]')[1].checked = true;
			
    });
	
    $("#selectUnknown").click(function () {
		
	$('input:radio[name=sex]:nth(2)').attr('checked',true);
	//$('input:radio[name=sex]')[2].checked = true;

    });
	
    $("#reset").click(function () {
		
	$('input:radio[name=sex]').attr('checked',false);
	
    });
		
  });
</script>
</head><body>

<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>

<br/>
<br/>
<br/>

<input type='button' value='Display Selected' id='isSelect'>
<input type='button' value='Select Male' id='selectMale'>
<input type='button' value='Select Female' id='selectFemale'>
<input type='button' value='Select Unknown' id='selectUnknown'>
<input type='button' value='Reset' id='reset'>

</body>
</html>

试试演示