如何使用jQuery选择单选按钮

浅浅的花香味﹌ 2023-02-15 07:49 21阅读 0赞

一个使用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>

[试试演示][Link 1]

标签： [jQuery][] [jQuery选择器][jQuery 1] [单选按钮][Link 2]

> 翻译自: [https://mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/][https_mkyong.com_jquery_how-to-select-a-radio-button-with-jquery]

[Link 1]: http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-select-radio-button.html
[jQuery]: https://mkyong.com/tag/jquery/
[jQuery 1]: https://mkyong.com/tag/jquery-selector/
[Link 2]: https://mkyong.com/tag/radio-button/
[https_mkyong.com_jquery_how-to-select-a-radio-button-with-jquery]: https://mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/