WEB制作、マーケティングに関する情報をお届けします。

See the Pen rvwWGe by tera.takahashi (@teratakatera) on CodePen.

<div class="remaining"><p>残りの入力項目<br><span class="number"></span> / <span class="items"></span></p></div>

JavaScriptでnumberに現在の残りの必須項目数、itemsに全ての必須項目数を表示させていきます。

$( 'select option[value=""]' )
	.html( 'お選びください。' );

念のために、書いておきますが上記はセレクトボックスの初期値に「お選びください。」の文言を追加しています。

	var items = $("form").find('.rq').length;
	$(".items").html(items);

formタグ内のクラス名「rq」の数を取得・出力しています。

	var i = 0;
	$(".number").html(items - i);

変数「i」に一つも入力がない状態の「0」を変数に代入します。この変数を使用してカウントを回します。その下の.html( 現在の数 – 入力項目数の初期値)で残りの必須項目数を取得しています。

	$("form").find('.rq').change(function() {
		calc();
	});
	$("form").find('.rq').keyup(function() {
		calc();
	});

「change」イベントと「keyup」イベントで発火させて項目数のカウントを回させます。
changeイベントはテキストやセレクトなどのvalue値が変更されたら、その時点で発火しkeyupイベントはキーボードのキーを押して、離した際に発火します。

	var calc = function() {
		i = 0;
		$("form").find('.rq').each(function() {
			if($(this).val() !== "") {
			i++;
		}
	});
	$(".number").html(items - i);
	};

実際の計算をさせている部分です。
if($(this).val() !== “”)は入力値が空の場合は○○○という処理で、中の処理は「i++」で「i」をカウントアップさせています。
そして最後に.html( 現在の数 – 入力項目数の初期値)で残りの必須項目数を取得しています。