入力チェック

質問

過去ログを探してみたのですが、該当する記事がなかったので、
質問させて頂きます。よろしくお願いします。

５種類位の商品をチェックボックスで選択し（複数選択可）、
チェックボックスで選択した商品の数量を、テキストボックス
で入力、またはプルダウンで選択できるようにしたいと考えて
います。

その際、商品の種類または数量のどちらかが未選択、または未
入力で送信しようとしたときにアラートを出したいのですが、
どういうスクリプトを書けばよいのでしょうか？

やりたいことです。
種類　Ａ・Ｂ・Ｃ・Ｄ・Ｅ　←チェックボックスで選択（複数選択可）
数量　Ａ・Ｂ・Ｃ・Ｄ・Ｅ　←テキスト入力かプルダウンで選択

種類Ａを選択して、数量Ａを入力していない場合にアラートを出す。
その逆の場合もアラートを出す。同じようにＢ・Ｃ・Ｄ・Ｅもアラー
トが出るようにしたい。
方両とも未入力または入力済みの場合は、アラートは出さない。

分りずらい部分がありましたら追記致しますので、
何卒よろしくお願い致します。

回答No.2

yambejp · ベストアンサー

jsの外部ファイルに関してはidで管理さえしていれば、特に問題なく
いけるんじゃないでしょうか？

フロートしては
if(条件){だめならアラート;return false}
あとはelseは使わないでずっと下にながしていって、最後までfalseを
返さなければreturn trueするという流れにすれば見やすくなると
思います。

お礼

ご回答くださりありがとうございました。
まだ、ちゃんとは動いていないですが、色々
と試しているうちに少し光が見えてきました。

本当にありがとうございました。

回答No.1

yambejp

この場合、チェックされているかどうかはあまり重要ではありません。
Ａ～Ｅの数量が入っているかだけチェックすればよいでしょう。
たとえばこんな感じです。
ながくなるのでＡ～Ｃとしています。

<script>
window.onload=function(){
var f=document.getElementById('form0');
f["A"].disabled=!document.getElementById('checkA').checked;
f["B"].disabled=!document.getElementById('checkB').checked;
f["C"].disabled=!document.getElementById('checkC').checked;
}
function check2select(obj,targetName){
var targetObj=obj.form[targetName]
targetObj.disabled=!obj.checked;
}
function select2check(obj,targetID){
var targetObj=document.getElementById(targetID);
if(obj.value==""){
targetObj.checked=false;
obj.disabled=true;
}
}
function checkForm(f){
flg=false;
for(var i=0;i<f.length;i++){
if(f[i].type=="select-one" && f[i].disabled==false){
if(f[i].value==""){
alert(f[i].name+"の数量が未選択");
return false;
}else{
flg=true;
}
}
}
if(!flg) alert("なにも選ばれてません");
return flg;
}

</script>
<form onSubmit="return checkForm(this)" id="form0">
<input type="checkbox" id="checkA" onClick="check2select(this,'A')"/><label for="checkA">Ａ:</label>
<select name="A" onChange="select2check(this,'checkA')">
<option value="">選択</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br />
<input type="checkbox" id="checkB" onClick="check2select(this,'B')"/><label for="checkB">Ｂ:</label>
<select name="B" onChange="select2check(this,'checkB')">
<option value="">選択</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br />
<input type="checkbox" id="checkC" onClick="check2select(this,'C')"/><label for="checkC">Ｃ:</label>
<select name="C" onChange="select2check(this,'checkC')">
<option value="">選択</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br />
<input type="submit" value="送る">
</form>

補足

早速ご回答頂き、誠にありがとうございます。無事動きました。
もし差し支えなければ、もう少しお教え頂きたいのですが、
現在、下記のような入力チェックのスクリプトを外部jsにして
使用しているのですが、これにお答えいただいたスクリプトを
組み込むことはできますでしょうか？

質問ばかりで誠に申し訳ありませんが、お分かりになるようで
したら、ぜひご教授頂ければ幸いです。よろしくお願い致します。

↓外部jsのスクリプトです。
----------------------------------------------------------

function check(frm){
var hissu=Array('ご注文される商品','お名前','ふりがな','ご住所 / 郵便番号','ご住所 / 都道府県','ご住所 / 市町村・番地','ご住所 / 建物・ビル名','メールアドレス','お電話番号');
var hissu_nm = Array('ご注文される商品','お名前','ふりがな','ご住所 / 郵便番号','ご住所 / 都道府県','ご住所 / 市町村・番地','ご住所 / 建物・ビル名','メールアドレス','お電話番号');
var len=hissu.length;
for(i=0; i<len; i++){
var obj=frm.elements[hissu[i]];
if(obj.type=='text' || obj.type=='textarea'){
if(obj.value==''){
alert(hissu_nm[i]+'は必須入力項目です。必ずご入力下さい。');
frm.elements[hissu[i]].focus();
return false;
}
}else if(obj[0].type=='radio'){
for(var j=0, chk=0; j<obj.length; j++){
if(obj[j].checked) chk++;
}
if(chk==0){
alert(hissu_nm[i]+'は必須選択項目です。必ずご選択下さい。');
obj[0].focus();
return false;
}
}else if(obj[0].type=='checkbox'){
for(var j=0, chk=0; j<obj.length; j++){
if(obj[j].checked) chk++;
}
if(chk==0){
alert(hissu_nm[i]+'は必須選択項目です。必ずご入力下さい。');
obj[0].focus();
return false;
}
}else if(obj.tagName=='select') {
if(obj.value == '') {
alert(hissu_nm[i]+'は必須選択項目です。必ずご入力下さい。');
obj.focus();
return false;
}
}
}
return true;
}