用途
新着
履歴
言語


jQuery 入力フォームの変更時に発動させる

jQuery 入力フォームの変更時に発動させる
jQuery 入力フォームの変更時に発動させる
セレクトボックスやラジオボタン、チェックボックスを選択したときや、テキストボックスに入力ときをきっかけにその情報を受け取るサンプルです。

まずはセレクトボタンを変更すると、そのテキスト情報と相応する値を取得するサンプルです。

選択された文字:
選択された値:
<form>
  <select class="demo_select">
    <option value="1" selected="selected">A型</option>
    <option value="2">B型</option>
    <option value="3">AB型</option>
    <option value="4">O型</option>
  </select>
</form>

<div class="demo_log" id="demo_value1">
	選択された文字:<span class="label"></span><br>
	選択された値:<span class="value"></span>
</div>
$(".demo_select").change(function() {
	$("#demo_value1 .label").html($(".demo_select option:selected").text());
	$("#demo_value1 .value").html($(".demo_select option:selected").val());
});

次はラジオボタンのサンプルです。ラジオボタンはどれか一つのデータを選ぶものなので、一つの情報を取得します。

選択された文字:
選択された値:
<div class="demo_radio">
<label><input type="radio" name="gender" value="male">男性</label>
<label><input type="radio" name="gender" value="female">女性</label>
</div>

<div class="demo_log" id="demo_value2">
	選択された文字:<span class="label"></span><br>
	選択された値:<span class="value"></span>
</div>
$( 'input[type="radio"]' ).change(function() {
	$("#demo_value2 .label").html($(this).parent().text());
	$("#demo_value2 .value").html($(this).val());
});

次はチェックボックスです。複数選択が可能なので、選択された情報だけ取得します。

選択された文字:
選択された値:
<div class="demo_checkbox">
<label><input type="checkbox" name="gender" value="1">肉</label>
<label><input type="checkbox" name="gender" value="2">玉ねぎ</label>
<label><input type="checkbox" name="gender" value="3">人参</label>
<label><input type="checkbox" name="gender" value="4">ジャガイモ</label>
</div>

<div class="demo_log" id="demo_value3">
	選択された文字:<span class="label"></span><br>
	選択された値:<span class="value"></span>
</div>
$('input[type="checkbox"]').change(function () {
    var str = "";
    var str2 = "";
    $( ".demo_checkbox input[type=checkbox]" ).each(function() {
		c = $( this ).prop("checked");
		if(c){
			str += $( this ).val() + " ";
			str2 += $( this ).parent().text() + " ";
		}
    });
    $("#demo_value3 .label").text( str2 );
    $("#demo_value3 .value").text( str );
});

次は、テキストの入力欄です。文字を書いて、フォーカスを外すか、エンターを押すと情報を表示します。

入力された値:
<input class="demo_text" type="text" value="" placeholder="文字入力欄">

<div class="demo_log" id="demo_value4">
	入力された値:<span class="value"></span>
</div>
$( ".demo_text" ).change(function() {
	$("#demo_value4 .value").html($(this).val());
});

最後にセレクトボックスの応用で、複数選択可能なプルダウンのサンプルです。

入力された値:BBB
<select id="demo_select" multiple="multiple">
  <option>AAA</option>
  <option selected="selected">BBB</option>
  <option>CCC</option>
  <option>DDD</option>
</select>

<div class="demo_log" id="demo_value5">
	入力された値:<span class="value"></span>
</div>
$( "#demo_select" ).change(function () {
    var str = "";
    $( "#demo_select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "#demo_value5 .value" ).text( str );
  })
  .change();
公開 : 2019-08-07 23:34:10
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top