jquery：val()

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

<div>電話番号を入力してください</div>
<div><input type='text'  class='tel_class' name='tel_name' size='20' maxlength='13' placeholder='例)03-123-1234' style='margin-top:5px'></div>
<button class='tel_check' style='margin-top:5px'>確認</button>
<div class='tel_message' style='color:red;'></div>
<script>
$(function(){
  $('.tel_check').click(function(){
 		var tel_number	= $('.tel_class').val(); // 入力されたデータを取得しています
 		var tel_check		= tel_number.match(/^0\d{1,2}-\d{3,4}-\d{4}$/);
  	if(tel_check != null){$('.tel_message').text('正しい電話番号です：'+ tel_number);}
  	else{
  		$('.tel_message').text('');
  		window.alert( '電話番号をチェックして下さい：' + tel_number );
  	}
  });
});
</script>

■8行目

入力データは セレクタ.val() で取得します。

■9行目

電話番号は0(1桁又は2桁の数字)-(3桁又は4桁の数字)-(4桁の数字)で、判断しています

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

<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').val(); // 選択された要素のvalue値を取得しています。
			$('.message01').text('選択値：' + select_item); // 取得したvalue値を出力しています。
		});
    $('.reset01').click(function(){
      $('.select01').prop('selectedIndex', 0); // セレクト値を0番目に変更しています。
      $('.message01').text('');
    });
	});
</script>

■12行目

value値の取得は、セレクト要素の子供の中で'option：selected'の物を取得します。

■16行目

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

セレクタ.prop('selectedIndex', 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).val()); // value値を取得しています。
			})
			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'> 項目1
<input type='checkbox' name='item[]' class='val_class' value='2'> 項目2
<input type='checkbox' name='item[]' class='val_class' value='3'> 項目3
<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).val());
			});
			var select_item = check_item.get().join();
			$('.val_message').text('選択値：' + select_item);
		});
		$('.reset_check').click(function(){
			$('.val_class').val([]);      
      $('.val_message').text('');
    });
	});
</script>

■10～12行目

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

■13行目

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

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

■17行目

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

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

<input type='radio' name='item' class='item' value='1'> 項目1
<input type='radio' name='item' class='item' value='2'> 項目2
<input type='radio' name='item' class='item' value='3'> 項目3
<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').val();
			$('.radio_message').text('選択値：' + check_item);
		});
		$('.reset_radio').click(function(){
			$('.item').val([]);      
      $('.radio_message').text('');
    });
	});
</script>

■10行目

value値の取得は、'セレクタ:checked'のval()を取得します。

■14行目

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