jsを使ってラジオボタンで要素の出し入れをしたい

2010/07/23 17:45

このQ&Aのポイント

jsを使って2つのラジオボタンでブロック要素の出し入れをしたいのですが、
IE7でだけチェックした結果が逆になってしまいます。
考えられる原因はなんでしょうか？

errorman
お礼率58% (30/51)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kuzumiHK
ベストアンサー率72% (132/183)

2010/07/23 23:40 回答No.2

どちらにもchecked="checked"をいれていないため、 IEでは、radio[0].checkedがcheckedではないと判定されてしまっているようです。そのため、onchangeの最初のクリックが判定外になり、2回目がradio[0]かradio[1]のcheckedと判定されるため、逆になってしまっているのではないでしょうか。クリックしたラジオボタンに確実に反応させるには、clickイベントを使ってみてはいかがでしょうか。シンプルになります。 <html> <head> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("input[name='coursetimetype1'][value='1']").click(function() { $('#c1,.c_void').show(); $('.c_master').css('width','585px'); }); $("input[name='coursetimetype1'][value='0']").click(function() { $('#c1,.c_void').hide(); $('.c_master').css('width','262px'); }); }); </script> <style type="text/css"> .c_master{ width:585px; border:1px solid #f00; } </style> </head> <body> <input type="radio" name="coursetimetype1" value="1"> <input type="radio" name="coursetimetype1" value="0"> <div id="c1">c1</div> <div class="c_void">c_void</div> <div class="c_master">c_master</div> </body> </html>

質問者

お礼 2010/07/26 17:19

いただいた回答を参考に組んでみましたところ、正常に動作しました！本当にありがとうございました！

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

yyr446
ベストアンサー率65% (870/1330)

2010/07/23 18:31 回答No.1

全体像が見えないので何ですが、jQuery使ってるんですよねえこの手の操作は、$().css('display','block') で出したり消したりするんじゃなく $().toggle()が一番楽です。あるいは $().hide() $().show() を使いましょう。

質問者

補足 2010/07/23 19:04

回答ありがとうございます。お察しの通り、jQueryを使用しています。 .hideと.showで制御してみましたが、やはりIE7でだけ逆に作用してしまうようです。 .showを指定したボタンを押すと非表示、 .hideを指定したボタンを押すと表示となってしまいます。＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ $(function(){entryChange1();}); function entryChange1(){ radio = document.getElementsByName('coursetimetype1'); if(radio[0].checked) { $('#c1').hide(); $('.c_void').hide(); $('.c_master').css('width','262px'); }else if(radio[1].checked){ $('#c1').show(); $('.c_void').show(); $('.c_master').css('width','585px'); } ～～～～～ <input onchange="entryChange1();" type="radio" name="coursetimetype1" value="1"> <input type="radio" onchange="entryChange1();" name="coursetimetype1" value="0">

ログインすると、全ての回答が全文表示されます。