質問: $('#form1 input:radio:checked').length; if(classCount > checkedCount){ $('.alert').text("すべて選択してください"); return false; }else{ $("#surveyArea").replaceWith('回答ありがとうございました'); myData(); } }); }); function myData(){ //送信のスクリプト } ``` 複数選択可のチェックボックスも追加になったため、やり方を変えないといけないと思うのですが、 思いつきません。 ### フォームの仕様について buttonクリック時に未入力があれば、アラートテキストを``に出します。 また、このHTMLアンケートは内容が変わることもあるそうで、 その都度jsを組み替えないでよいように、あらかじめラジオボタン、チェックボックス、テキストと構成が変更しても対応できるようにしないといけません。 すべてのclass="required"が選択or入力されたかチェックして、その数を照らし合わせるのかなと思ったのですが、それがわからず。 pureでもjQueryでもよいですので、 ご教授いただける方いましたらお願いします。
回答: 同じnameでrequiredあったりなかったりはサンプルにしてはよろしくないかと思いますが・・。 チェックボックスの考え方は既にある回答で良いと思います。 ただ、type属性取得してそれによってチェック内容を分岐させた方が良いかと思います。 ※ざっと作ったのでかなり冗長で不備があるかもしれません ひとまず「未入力」「未チェック」に色を付けるようにしてみました。 ``` .text_err{ border:red 1px solid; } .check_err { color: red; } ``` ``` $(function(){ $('input:button').on('click',function(){ $(".text_err").removeClass("text_err"); $(".check_err").removeClass("check_err"); let err_cnt = 0; $('.required').each(function(i, elem){ let forms = $(elem).children('input,select,textarea'); //全て同じ要素とする let firstElem = $(forms[0]); switch(firstElem.prop("tagName")){ case "INPUT": let type = firstElem.attr("type"); switch(type){ case "text": if(firstElem.val()==""){ firstElem.addClass("text_err"); err_cnt++; } break; case "checkbox": case "radio": let check_cnt = 0; forms.each(function(ri,releme){ if($(releme).prop('checked')){ check_cnt++; } }); if(check_cnt == 0){ $(elem).addClass("check_err"); err_cnt++; } break; } break; //1つしかないとする case "TEXTAREA": case "SELECT": if(firstElem.val()==""){ firstElem.addClass("text_err"); err_cnt++; } break; } }) if(err_cnt>0){ //省略 } }); }); ```