jQueryを使用してHTMLのフォーム部品となる「テキストボックス」、「ラジオボタン」、「チェックボックス」、「リストボックス」を操作する方法をご紹介します。

テキストボックスの操作方法

• テキストボックスへ値を設定
  HTML
  
  XHTML

  <input id="text-001" type="text" name="text-box-sample" size="20" maxlength="10" value="" /> <input id="btn-001" type="button" name="btn-001" value="表示内容変更">

  1 2	<input id="text-001" type="text" name="text-box-sample" size="20" maxlength="10" value="" /> <input id="btn-001" type="button" name="btn-001" value="表示内容変更">

  
  jQuery
  
  JavaScript

  jQuery(function($) { /* テキストボックスへ「テスト表示」を設定 */ jQuery("#btn-001").click(function() { jQuery("#text-001").val("テスト表示"); }); });

  1 2 3 4 5 6

  jQuery(function($) { /* テキストボックスへ「テスト表示」を設定 */ jQuery("#btn-001").click(function() { jQuery("#text-001").val("テスト表示"); }); });

  
  サンプル
  

ラジオボタンの操作方法

• ラジオボタンが変更されたらラジオボタンのValue値を表示
  HTML
  
  XHTML

  <input type="radio" name="radio-sample" value="test1" checked="checked" />test1 <input type="radio" name="radio-sample" value="test2" />test2 <input type="radio" name="radio-sample" value="test3" />test3 <span id="radio_label"></span>

  1 2 3 4

  <input type="radio" name="radio-sample" value="test1" checked="checked" />test1 <input type="radio" name="radio-sample" value="test2" />test2 <input type="radio" name="radio-sample" value="test3" />test3 <span id="radio_label"></span>

  
  jQuery
  
  JavaScript

  /* ラジオボタン変更時、選択した内容を表示 */ jQuery("input[name='radio-sample']").change(function() { // 選択したラジオボタンの値（ラベル）を取得 var radioVal = jQuery("[name='radio-sample']:checked").val(); // 選択したラジオボタンの内容を表示 jQuery("#radio_label").text("あなたは「" + radioVal + "」を選択しました"); });

  1 2 3 4 5 6 7

  /* ラジオボタン変更時、選択した内容を表示 */ jQuery("input[name='radio-sample']").change(function() { // 選択したラジオボタンの値（ラベル）を取得 var radioVal = jQuery("[name='radio-sample']:checked").val(); // 選択したラジオボタンの内容を表示 jQuery("#radio_label").text("あなたは「" + radioVal + "」を選択しました"); });

  
  サンプル
  test1test2test3
  

セレクトボックスの操作方法

• セレクトボックスへ選択肢を追加
  HTML
  
  XHTML

  <select id="select-001" name="test"><select> <input id="btn-002" type="button" name="btn-002" value="選択肢を追加">

  1 2	<select id="select-001" name="test"><select> <input id="btn-002" type="button" name="btn-002" value="選択肢を追加">

  
  jQuery
  
  JavaScript

  /* セレクトボックスへ要素を追加 */ var count = 0; jQuery("#btn-002").click(function() { count += 1; var key = "key" + count; var text = "value" + count; jQuery("#select-001").append( jQuery("" + text + "") ); });

  1 2 3 4 5 6 7 8

  /* セレクトボックスへ要素を追加 */ var count = 0; jQuery("#btn-002").click(function() { count += 1;     var key  = "key" + count;     var text = "value" + count;     jQuery("#select-001").append( jQuery("" + text + "") ); });

  
  サンプル

チェックボックスの操作方法

• チェックボックスの状態を表示
  HTML
  
  XHTML

  <input id="chkFormPartsMethodSample" type="checkbox" name="chkFormPartsMethodSample"/>チェックボックスサンプル <div id="chkFormPartsMethodSampleVal">test</div>

  1 2	<input id="chkFormPartsMethodSample" type="checkbox" name="chkFormPartsMethodSample"/>チェックボックスサンプル <div id="chkFormPartsMethodSampleVal">test</div>

  
  jQuery
  
  JavaScript

  /* チェックボックスの状態を表示 */ jQuery("#chkFormPartsMethodSample").change(function() { if(jQuery("#chkFormPartsMethodSample:checked").val()) { jQuery("#chkFormPartsMethodSampleVal").text("チェックされています。"); } else { jQuery("#chkFormPartsMethodSampleVal").text("チェックされていません。"); } });

  1 2 3 4 5 6 7 8

  /* チェックボックスの状態を表示 */ jQuery("#chkFormPartsMethodSample").change(function() { if(jQuery("#chkFormPartsMethodSample:checked").val()) { jQuery("#chkFormPartsMethodSampleVal").text("チェックされています。"); } else { jQuery("#chkFormPartsMethodSampleVal").text("チェックされていません。"); } });

  
  サンプル
  チェックボックスサンプル