質問: 下記参考サイトのように入力フォームの残りの項目数をリアルタイムで表示したいです。 https://www.31sumai.com/form/Profile 具体的仕様は以下の通りです。 ``` ニックネーム >都道府県 北海道 青森県 秋田県 岩手県 山形県 宮城県 福島県 茨城県 年齢 選択 20代 30代 40代 50代 60代 ■電話番号 暗証番号 ※数字4桁 オプション オプション1 オプション2 オプション3 ``` 上記のフォームは全て必須項目です。 オプションはすでにchecked状態なので実質その上の5項目を入力する形になります。 入力状況に応じて下記別エリアmessageのnumber内部に残りの項目数を表示する方法をお教えください。 ``` 残りの入力項目は / 5です。 ```
回答: ``` var total = $("form").find("input, select").length; //入力フォームの合計の数 var i = 0; var check = function() { $("form").find("select").each(function() { if(typeof this.val() !== "undefined") { i++; } }); i += $("form").find("input[type=\"option\"]:checked").length; i += $("form").find("input[type=\"tel\"],input[type=\"text\"]").each(function() { if(this.val() !== "") { i++; } }); $(".number").html(i); }; $("form").find("select, input[type=\"option\"]").change(function() { check(); }); $("form").find("input[type=\"tel\"],input[type=\"text\"]").keyup(function() { check(); }); ``` たぶん、こんな感じでいけるかなと 修正 ``` ニックネーム 都道府県 選択 北海道 青森県 秋田県 岩手県 山形県 宮城県 福島県 茨城県 年齢 選択 20代 30代 40代 50代 60代 ■電話番号 暗証番号 ※数字4桁 オプション オプション1 オプション2 オプション3 残りの入力項目は / です。 ```