jquery(javascript)で複数選択チェックボックスの配列の入力チェックをする手軽な方法

2018-12-07 611 1529

phpは分かりやすいのですが、javascriptの配列はちょっと独特ですよね？
ラジオボタン・チェックボタンの入力チェックの際に、選択がない場合は「undefined」というテキストデータが入ってしまいますし。

今回のテーマは複数選択のチェックボックスを入力チェックする方法についてです。
複数選択のチェックボックスはフォームでよく出てきます。

近年は、jqueryを当たり前のように読み込んでいると思いますので、jqueryありきのコードです。
例えば、エリアの選択で下記のようなHTMLがあったとします。複数選択のチェックボックスを配列で受け取れるようにする場合は、「area[]」とname値を配列型にしますよね。

<label><input type="checkbox" name="area[]" value="68">新宿</label>

<label><input type="checkbox" name="area[]" value="67">代々木</label>

<label><input type="checkbox" name="area[]" value="66">大久保･新大久保</label>

<label><input type="checkbox" name="area[]" value="65">八王子･吉祥寺･荻窪</label>

<label><input type="checkbox" name="area[]" value="62">東新宿･新宿御苑前･四谷</label>

<label><input type="checkbox" name="area[]" value="60">飯田橋･神楽坂</label>

<label><input type="checkbox" name="area[]" value="64">中野･高円寺</label>

<label><input type="checkbox" name="area[]" value="63">西新宿五丁目･中野坂上･西新宿･練馬</label>

<label><input type="checkbox" name="area[]" value="61">新宿三丁目･市ヶ谷</label>

<label><input type="checkbox" name="area[]" value="59">府中･調布･つつじヶ丘</label>

<label><input type="checkbox" name="area[]" value="58">千歳烏山･下高井戸･明大前</label>

<label><input type="checkbox" name="area[]" value="56">西武新宿線</label>

<label><input type="checkbox" name="area[]" value="57">代田橋･笹塚･幡ヶ谷･初台</label>

受け取る際のJqueryコード

$('#frm .btn').click(function(){

    var area = [];

    $('input[name="area[]"]:checked').each(function(){ area.push($(this).val());});

    alert(area); //表示結果「68,67,66」

});

とすると、配列をカンマ区切りの変数データにしてくれます。こうしてしまえば、入力チェックが簡単になります。