プルダウンメニューに連動するチェックボックス

質問

はじめまして。
よろしくお願いいたいます。

以前、こちらに質問として挙がっておりましたプルダウンメニューに連動するチェックボックスのdisable切り換えにつきまして。

http://okwave.jp/qa/q2928590.html

上記のアドレスの内容で設置した場合に、チェクを変更するときに最初にチェックしたものをリセットすることは可能でしょうか？

例えば

一度
食べも
お米とりんごをチェック後に再度やり直したいとして、

二度目に
食べ物以外を選択した場合（生き物など）に上記のお米とリンゴのチェックをリセットして、全てのチェックを外したいのですがそんな便利なことが可能でしょうか？

可能でしたらどなたかご教授頂けると助かります。
何卒よろしくお願いいたします。

回答No.1

yambejp · ベストアンサー

セレクトボックスで別の項目を選ぶたびにチェックをはずされるというのは
ユーザービリティがかなり悪いとおもいます。
やるならこんな感じ

<script language="javascript">
function changeFunc(obj){
var v=obj.value;
var f=obj.form;
var food={
"grain":["rice","soba"]
,"fruit":["apple","orange"]
,"meat":["pork","fish"]
,"hot":["rice","soba","pork","fish"]
,"cold":["apple","orange"]
,"red":["apple","pork"]
};
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
f[i].checked=false;
if(v=="") f[i].disabled=false;
else f[i].disabled=true;
}
}
if(typeof food[v] =="undefined") return false;

for(var j in food[v]){
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
if(f[i].id==food[v][j] ) f[i].disabled=false;
}
}
}
}
function uncheck(f){

}
</script>
<form>
<select name="genre" onChange="changeFunc(this)">
<option value="">食べ物</option>
<option value="meat">生き物</option>
<option value="fruit">果物</option>
<option value="grain">穀物</option>
<option value="hot">温かい</option>
<option value="cold">冷たい</option>
<option value="red">赤い</option>
</select><br>
<input type="checkbox" value="お米" id="rice">お米<br>
<input type="checkbox" value="りんご" id="apple">りんご<br>
<input type="checkbox" value="みかん" id="orange">みかん<br>
<input type="checkbox" value="さかな" id="fish">さかな<br>
<input type="checkbox" value="豚肉" id="pork">豚肉<br>
<input type="checkbox" value="そば" id="soba">そば<br>
</form>

実際には、別途「全チェックをはずす」ボタンなどをつくって
それが押された時に作用するような方法が妥当だと思います