jQueryで複数要素をループで処理したいときに使えるeachがあります。
下の例ではアンケートフォームで、チェックボックスの入力漏れがないかチェックしています。
テーブル内にチェックボックスを複数配置しているので、各行をeachで回して、 行にあるチェックボックスのいずれもチェックされなければalertするようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<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をキャンセルできます。
