jQueryでラジオボタンを選択する方法

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery selector, radio button

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>

リンク://wp-content/uploads/jQuery/jQuery-select-radio-button.html[デモを試してください]

jquery

jquery selector

ラジオボタン

getdocs

13036