セレクトメニュー項目によって、表示内容を変えたい。

質問

セレクトメニューの内容によって、チェックボックスの表示をさせたいのですが、
Javascriptを使って設定できるか教えて下さい。
例えば、セレクトメニューリストが、「選択して下さい」「犬」「ネコ」「鳥」「トラ」とあって、
「犬」を選んだ時に、「オスのみ」「メスのみ」のチェックボックスを表示させるにはどうすればいいでしょうか？
(それ以外のリストを選んだ場合は表示させなくしたいのです。)
宜しくお願いします。

回答No.1

SAYKA · ベストアンサー

チェックボックスのstyleを display:none に切り替えたら表示されなくなるよ。

お礼

ありがとうございます。
ちょっとづつ分かってきました☆

回答No.4

yambejp

#2です。

絶対選ばないといけないわけではない・・・ということですね。
その場合並列のラジオボタンで、「選択しない」という項目を作っておくとか
セレクトボックスでやるというのもありかも。

ま、どうしてもチェックボックスがよいというのであれば、こんな感じで
やってもいいかなぁ・・・

<script>
function change(obj){
var f=obj.form;
for(var i=0;i<f.sex.length;i++){
f.sex[i].disabled=(obj.value!="dog");
}
}
function check(obj){
var objs=obj.form.elements[obj.name];
for(var i=0; i<objs.length;i++){
if(objs[i]!=obj) objs[i].checked=false;
}
}
</script>
<form>
<select name="animal" onchange="change(this)">
<option value="">選択して下さい
<option value="dog">犬
<option value="cat">ネコ
<option value="bird">鳥
<option value="tiger">トラ
</select>
<input type="checkbox" name="sex" id="male" value="male" disabled onClick="check(this)"><label for="male">オスのみ</lable>
<input type="checkbox" name="sex" id="female" value="female" disabled onClick="check(this)"><label for="female">メスのみ</lable>
<input type="submit" value="go">
</form>

お礼

いけました！！
ありがとうございます！！

回答No.3

wp_

>ラジオボタンだと一度押してしまうと解除できなくなるので、
>チェックボックスがいいのですが、
>ラジオボタンでもチェックをクリアにする設定方法はありますでしょうか？

発想の転換で、「選択しない」の項目を追加するのも一つの方法です。
ユーザフレンドリーで作るならばラジオボックスの方が親切だと思いますよ。

回答No.2

yambejp

いくつか問題点が・・・。
表示させないだけなら手はありますが、非表示にしただけだとsubmitするときには
データが送られちゃったりするので、この手のものはdisabledで処理する
方がよいでしょう。（もしくは表示をけしつつdisabledを使用する）

それとチェックボックスで「オスのみ」と「メスのみ」は内容的に選択が競合します。
できればラジオボタンでやった方がベターです。

<script>
function change(obj){
var f=obj.form;
for(var i=0;i<f.sex.length;i++){
f.sex[i].disabled=(obj.value!="dog");
}
}
</script>
<form>
<select name="animal" onchange="change(this)">
<option value="">選択して下さい
<option value="dog">犬
<option value="cat">ネコ
<option value="bird">鳥
<option value="tiger">トラ
</select>
<input type="radio" name="sex" id="male" value="male" disabled><label for="male">オスのみ</lable>
<input type="radio" name="sex" id="female" value="female" disabled><label for="female">メスのみ</lable>
<input type="submit" value="go">
</form>

お礼

ありがとうございました。
早速試してみます。

補足

質問なのですが、チェックボックスにする場合は、
<script>部分をどこか変更すればいいでしょうか？
ラジオボタンだと一度押してしまうと解除できなくなるので、
チェックボックスがいいのですが、
ラジオボタンでもチェックをクリアにする設定方法はありますでしょうか？
宜しくお願い致します。