jQuery 複数の要素をまとめてeachで繰り返し処理

jQueryで複数要素をループで処理したいときに使えるeachがあります。

下の例ではアンケートフォームで、チェックボックスの入力漏れがないかチェックしています。
テーブル内にチェックボックスを複数配置しているので、各行をeachで回して、 行にあるチェックボックスのいずれもチェックされなければalertするようにしています。

<form action="./">
<table class="check-lists">
<tr>
<th></th>
<th>おいしい</th>
<th>ふつう</th>
<th>まずい</th>
</tr>
<tr>
<td>きなこもちラーメン</td>
<td><input type="checkbox" name="chk1" value="1"></td>
<td><input type="checkbox" name="chk1" value="2"></td>
<td><input type="checkbox" name="chk1" value="3"></td>
</tr>
<tr>
<td>チョコパイラーメン</td>
<td><input type="checkbox" name="chk2" value="1"></td>
<td><input type="checkbox" name="chk2" value="2"></td>
<td><input type="checkbox" name="chk2" value="3"></td>
</tr>
</table>
<button type="submit" value="">結果</button>
</form>
<script>
jQuery(function($){
	$('form').submit(function() {
		var check = '';
		$('.check-lists tr').each(function(index , elm){
			if ($(elm).find('input:checkbox').size()>0){
				if (!$(elm).find('input:checkbox').is(':checked')){
					//alert('入力していない項目があります');
					check += '入力していない項目があります';
				}
			}
		});
		if (check!='') {
			alert(check);
			return false;
		}else{
			alert('そうなんだー');
		}
	});
});
</script>
おいしい ふつう まずい
きなこもちラーメン
チョコパイラーメン

 

$('.check-lists tr').each(function(index , elm){ } で、行をループします。
該当する要素を順に取得していくのですが、 index にループのカウント、elmにその対象要素が入ります。

if ($(elm).find('input:checkbox').size()>0){ } で、チェックボックスがある行だけを対象にします。

size() は、要素の数を返します。

if (check!='') return false; とすることで、submitをキャンセルできます。

2+
  • このエントリーをはてなブックマークに追加