jquery：text()

このプログラムは下記から構成されています。

<p class='taget'>初期値のテキストです</p>
<button type='button' class='get' style='margin-top:10px;'>取得</button>
<button type='button' class='up_date'style='margin-top:10px;' >更新</button>
<button type='button' class='reset' style='margin-top:10px;'>リセット</button>
<div class='msg' style='color:red;'></div>
<script>
	$(function(){
		$('.get').click(function(){
			var get_text = $('.taget').text(); // テキストデータを取得しています。
			$('.msg').text('取得テキスト：' + get_text);　// テキストデータを書き込んでいます
		});
		$('.up_date').click(function(){
			$('.taget').text('更新されたテキストです'); // テキストデータを更新しています
			$('.msg').text(''); // テキストデータを削除しています。
		});
    $('.reset').click(function(){
      $('.taget').text('初期値のテキストです');
      $('.msg').text('');
    });
	});
</script>

■テキストデータの処理は下記になります

・取得：9行目

・書込：10行目、17行目

・更新：13行目

・削除：14行目、18行目

上記のプログラムは下記から構成されています。

<select name='select01' class='select01'> 
	<option value='#none#'>選択してください</option>
	<option value='1'>項目1</option> 
	<option value='2'>項目2</option> 
	<option value='3'>項目3</option> 
</select>
<button type='button' class='reset01' style='margin-top:10px;'>リセット</button>
<div class='message01' style='color:red;'></div>
<script>
	$(function(){
		$('.select01').change(function(){
			var select_item = $(this).children('option:selected').text(); // 選択された要素のテキスト値を取得しています。
			$('.message01').text('選択値：' + select_item); // 取得したテキスト値を出力しています。
		});
    $('.reset01').click(function(){
      $('.select01').prop('selectedIndex', 0); // セレクト値を0番目に変更しています。
      $('.message01').text('');
    });
	});
</script>

■12行目

セレクトされた要素のテキスト値の取得は、セレクト要素の子供の中で'option:selected'になっている要素のテキスト値を取り出します。

■15行目

セレクト要素をリセットする時は、セレクト要素の属性値を変更します。

.prop('selectedIndex', 0)　0はインデックス番号

上記のプログラムは下記から構成されています。

<select name='select02' class='select02'  size='4' multiple> 
	<option value='1'>項目1</option> 
	<option value='2'>項目2</option> 
	<option value='3'>項目3</option>
	<option value='4'>項目4</option>  
</select>
<button type='button' class='reset02' style='margin-top:10px;'>リセット</button>
<div class='message02' style='color:red;'></div>
<script>
	$(function(){
		$('.select02').change(function(){
			var get_item = $(this).children('option:selected').map(function(){ // 複数値の取得はmapで取得します
			return($(this).text()); // セレクトした要素のテキストを取り出します。
			})
			var select_item = get_item.get().join(); // mapで取得したjQueryオブジェクトから配列を取り出し、それを文字列に変更しています。
			$('.message02').text('選択値：' + select_item);
		});
    $('.reset02').click(function(){
			$('.select02').val([]);      
      $('.message02').text('');
    });
	});
</script>

■11～17行目

セレクト要素は複数あるのでセレクト要素の子供の中で'セレクタ：selected'の物を.map(func)で取得します。

.map(func)の返り値はjQueryオブジェクトになります。

よって取得した値を.get().join()で配列化、テキスト化を行っています。

■19行目

マルチセレクトをクリアする為には、.val([]) 空の配列を書き込みます。

上記のプログラムは下記から構成されています。

<input type='checkbox' name='item[]' class='val_class' value='1'><span style='margin-left:5px'>項目1</span>
<input type='checkbox' name='item[]' class='val_class' value='2'><span style='margin-left:5px'>項目2</span>
<input type='checkbox' name='item[]' class='val_class' value='3'><span style='margin-left:5px'>項目3</span>
<button class='val_check' style='margin-top:3px'>選択確認</button>
<button type='button' class='reset_check' style='margin-top:3px;'>リセット</button>
<div class='val_message' style='color:red;'></div>
<script>
	$(function(){
		$('.val_check').click(function(){
			var check_item = $('.val_class:checked').map(function(){
				return($(this).next().text());
			});
			var select_item = check_item.get().join();
			$('.val_message').text('選択値：' + select_item);
		});
		$('.reset_check').click(function(){
			$('.val_class').val([]);      
      $('.val_message').text('');
    });
	});
</script>

■テキスト値を取得する為の注意点：1～3行目

チェックボックスのテキスト値を取得する為には、jQueryで選択可能な形式でテキストを記述する必要があります。

・<input xxxxx>項目１

この形式は取得できません

・<input xxxxx><span>項目１</span>

next().text()で取得できます。

・<div><input xxxxx>項目１</div>又は<label><input xxxxx>項目１</label>

parent().text()で取得できます。

■10～12行目

チェックボックスのテキスト値は複数あるので'セレクタ:checked'の物を.map(func)で取得します。

■13行目

.map(func)の返り値はjQueryオブジェクトになります。

よって取得した値を.get().join()で配列化、テキスト化を行っています。

■17行目

チェックBOXのリセットは.val([]) で、空の配列を書き込みます。

上記プログラムは下記から構成されています。

<input type='radio' name='item' class='item' value='1'><span style='margin-left:5px'>項目1</span>
<input type='radio' name='item' class='item' value='2'><span style='margin-left:5px'>項目2</span>
<input type='radio' name='item' class='item' value='3'><span style='margin-left:5px'>項目3</span>
<button class='radio_check' style='margin-top:3px'>選択確認</button>
<button type='button' class='reset_radio' style='margin-top:3px;'>リセット</button>
<div class='radio_message' style='color:red;'></div>
<script>
	$(function(){
		$('.radio_check').click(function(){
			var check_item = $('.item:checked').next().text();
			$('.radio_message').text('選択値：' + check_item);
		});
		$('.reset_radio').click(function(){
			$('.item').val([]);      
      $('.radio_message').text('');
    });
	});
</script>

■テキスト値を取得する為の注意点：1～3行目

ラジオボタンのテキスト値を取得する為には、jQueryで選択可能な形式でテキストを記述する必要があります。

・<input xxxxx>項目１

この形式は取得できません

・<input xxxxx><span>項目１</span>

next().text()で取得できます。

・<div><input xxxxx>項目１</div>又は<label><input xxxxx>項目１</label>

parent().text()で取得できます。

■10行目

テキスト値の取得は、'セレクタ:checked' のnext().text()で取得しています。

■14行目

ラジオボタンのリセットは、val([]) で、空の配列を書き込みます。