jQueryでラジオボタンを選択する方法
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[デモを試してください]