
はじめまして。
よろしくお願いいたいます。
以前、こちらに質問として挙がっておりましたプルダウンメニューに連動するチェックボックスのdisable切り換えにつきまして。
http://oshiete.goo.ne.jp/qa/2928590.html
上記のアドレスの内容で設置した場合に、チェクを変更するときに最初にチェックしたものをリセットすることは可能でしょうか?
例えば
一度
食べも
お米とりんごをチェック後に再度やり直したいとして、
二度目に
食べ物以外を選択した場合(生き物など)に上記のお米とリンゴのチェックをリセットして、全てのチェックを外したいのですがそんな便利なことが可能でしょうか?
可能でしたらどなたかご教授頂けると助かります。
何卒よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
セレクトボックスで別の項目を選ぶたびにチェックをはずされるというのは
ユーザービリティがかなり悪いとおもいます。
やるならこんな感じ
<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>
実際には、別途「全チェックをはずす」ボタンなどをつくって
それが押された時に作用するような方法が妥当だと思います
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
同じ名前のセレクトがある場合...
-
ラジオボタンの選択に応じてプ...
-
プルダウン選択を変更すると、...
-
Selectボックスの幅を自動で広...
-
javaScriptの変数をJavaの変数...
-
JavaScriptのfileオブジェクト...
-
<JavaScript>tableタグを入力不...
-
ASP.NETでNAME属性を固定にしたい
-
RegularExpressionValidatorの...
-
クリックされた罫表セルの行番...
-
onchangeイベントを強制的に発...
-
プルダウンで選択された値を別...
-
二次元配列に数字をランダムに...
-
sessionの値でボタンを活性・非...
-
JQueryで2つのテキストフィー...
-
cookie使用時にundefinedと表示...
-
doPostBack 関数について
-
【FORM】 リンク文字で submit...
-
tableの任意行にfocusをあてる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
プルダウン選択を変更すると、...
-
2段階プルダウンで1段階目の選...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
【JavaScript】プルダウンで数...
-
スマホのフォームでのselect複...
-
二つのセレクトボックス間での...
-
3つの連動したプルダウンメニュ...
-
プルダウンを選択していないと...
-
2つのプルダウンメニューで、同...
-
selectを変更不可にしたい
-
Selectボックスの一覧表示方法
-
webページの一部のみの更新につ...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
javascriptでセレクトボックス...
-
コードレビューをお願いします。
-
selectタグで日付を生成
おすすめ情報