PeaceJetのブログ

金融系の社内エンジニアをやりながら、マーケティングやデータ分析などもやっています。

JQueryでチェックボックスの要素を配列で取得し、存在確認まで

JQueryチェックボックスの要素を配列で取得・存在確認

こんにちは、PeaceJetです。

今回は、JQueryチェックボックスの要素を配列で取得し、存在確認までやりたいと思います。

まず、以下のようにinput要素があるとします。

<input type="checkbox" class="check" value="JavaScript"><label>JavaScript</label>
<input type="checkbox" class="check" value="JAVA"><label>JAVA</label>
<input type="checkbox" class="check" value="Ubuntu"><label>Ubuntu</label>

要素を配列で返す関数を用意する

次に、チェックボックスの要素を配列で返すような関数を用意します。

$MyArray = $('[class="check"]:checked').map(function(){ return $(this).val(); }).get();

「indexOf」を使います。

「indexOF」メソッドは、ある特定の要素が配列の何番目で登場するかを捜索するものです。

存在確認だけであれば、以下のように使用することが出来ます。

if ($MyArray.indexOf('JavaScript') >= 0 ) {
    console.log('JavaScriptは存在します');
}

indexOfを使わない方法も・・・

今回は、indexOfを使わない方法を記載します。

for(var i = 0, len = $MyArray.length; i < len; i++){
	if(i in $MyArray && $MyArray[i] === 'JavaScript'){
		console.log('JavaScriptは存在します');
		break;
	}
}