- 締切済み
２つのjavascriptを１つにするには
教えてください。 下記のフォームでチェックボックスにチェックを入れると 1.ラジオボタンがグレーアウトして選択不可能になる 2.ファイル選択ボタンがグレーアウトして選択不可能になる 3.ラジオボタンの選択が全てクリアされる 4.選択したファイルがクリアされる を同時に実現したいと思っています。 1～3は実現できているのですが、4を同時に実行することができていません。 チェックボックスにチェックを入れただけで、クリアボタンを押さなくても 【script(1)】と【script(2)】を同時に実行するにはどのようにすればいいでしょうか？ よろしくお願いします。 <html> <head> <!-- 【script(1)】 --> <script type="text/javascript"> <!-- function checkdis(_this, targetN) { for (var i = 0; i < targetN.length;i++) { var tN = document.getElementById(targetN[i]); if(_this.checked == true) { tN.disabled = true; document.getElementById(targetN[i]).checked = false; } else { tN.disabled = false; } } } //--> </script> <!-- 【script(2)】 --> <script type="text/javascript"> <!-- function fileRefClear(oId) { var obj = document.getElementById(oId); var stO = obj.innerHTML; obj.innerHTML = stO; } // --> </script> </head> <body> <table border="1"> <tr><td> <p>画像2</p> <p><input type="checkbox" id="img2no" name="画像の掲載" value="なし" onclick="checkdis(this, ['img2a', 'img2b', 'img2c', 'img2d', 'img2e']);">該当なし</p> </td></tr> <tr><td>【掲載する画像の種類をお選び下さい。】 <ul> <li><input type="radio" id="img2a" name="画像2の種類" value="写真">写真</li> <li><input type="radio" id="img2b" name="画像2の種類" value="イラスト">イラスト</li> </ul> </td></tr> <tr><td>【画像の人物との関係をお選び下さい。】 <ul> <li><input type="radio" id="img2c" name="画像2の人物" value="本人">本人</li> <li><input type="radio" id="img2d" name="画像2の人物" value="ご家族">ご家族</li> </ul> </td></tr> <tr><td> 【ファイルをお選び下さい。】 <p align="center"> <span id="file2"><input type="file" name="画像2" id="img2e" size="45"></span> <span><input type="button" value="クリア" onclick="fileRefClear('file2'); return false;"></span> </p> </td></tr> </table> </body> </html>
- kajiya16
- お礼率84% (16/19)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- yuu_x
- ベストアンサー率52% (106/202)
> IEは参照ファイル消えず defaultValue が拾えないのかな？
- yuu_x
- ベストアンサー率52% (106/202)
わかったかも。 checkbox に onclick がついたままになってないですか？ onclick は form のだけで動きますので、もし、checkbox に onclick が付いてたら外してもらえますか？
お礼
ご回答ありがとうございました。
補足
本当に何回もありがとうございます。 たしかに <input type="checkbox" id="img2no" name="画像の掲載" value="なし" onclick="checkdis(event);"> となっていたので <input type="checkbox" id="img2no" name="画像の掲載" value="なし"> としました。 するとエディタでのエラーは出なくなりました。 しかし動作は変わらずchromeは○ IEは参照ファイル消えず。 私の方でまだ何か修正間違いがありそうなので 現在のソースをお使いのBBSのRES4として書き込ませて頂きます。
- yuu_x
- ベストアンサー率52% (106/202)
う～む、なんてこった。どうしようか 試しに if 文の前で alert( t ); してもらえませんか？ チェックボックスをクリックした時の結果を教えてもらえると助かります。 お手数かけて済みません。
お礼
ご回答ありがとうございました。
補足
<script type="text/javascript"> <!-- function checkdis( evt ) { var t = evt.target || evt.srcElement; var es, i, l, m; alert( t ); if ( t.getAttribute( 'type' ) == 'checkbox' ) { m = /\d+/.exec( t.id ); es = t.form.elements; l = es.length; for ( i = 0; i < l; ++ i ) { if ( es[i] != t && es[i].id.indexOf( m[0] ) != -1 ) { es[i].disabled = t.checked; if ( t.checked ) { es[i].checked = false; es[i].value = es[i].defaultValue; } } } } } //--> </script> として実行してみました。 ブラウザで開くと動作は前回と同じでchromeは完全動作、IEは参照ファイル消えず。 エディタのプレビューで実行すると、チェックボックスをクリックした時に 「undefined」 「プロパティ'getAttribute'の値を取得出来ません。」 「object HTMLInputElement」 のエラーが順に出ます。 チェックボックス以外の部分でもどこかをクリックすると 「object HTMLInputElement」 が出ます。 これは回答No.5のどちらのjavascriptにしてみても同じでした。 っていうかalert( t );の挿入場所あってますでしょうか…？；
- yuu_x
- ベストアンサー率52% (106/202)
以前提示したコードは リセットしてるだけなので、画像がいくつ増えても問題ないですよ。 文字化けに関しては、文字コードが UTF-8 なら多分問題ないと思います。 Shift_JIS だと文字化けの可能性がありますので避けたほうがいいでしょう。
お礼
ご回答ありがとうございました。
補足
説明が下手で申し訳ありません。 ＞「画像2」のあとに「画像3」「画像4」…と続く場合 とは、下記ソースのようになる場合のことでした。 「画像2」の「該当なし」をチェックすると「画像2」に関する項目がグレーアウトして参照ファイルがクリアされ、「画像3」の「該当なし」をチェックすると「画像3」の項目と参照ファイルが同様に… 文字コードは今のところUTF-8にしているのでほっとしました。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <!-- 【script(1)】 --> <script type="text/javascript"> <!-- function checkdis(_this, targetN) { for (var i = 0; i < targetN.length;i++) { var tN = document.getElementById(targetN[i]); if(_this.checked == true) { tN.disabled = true; document.getElementById(targetN[i]).checked = false; } else { tN.disabled = false; } } } //--> </script> <!-- 【script(2)】 --> <script type="text/javascript"> <!-- function fileRefClear(oId) { var obj = document.getElementById(oId); var stO = obj.innerHTML; obj.innerHTML = stO; } // --> </script> </head> <body> <form> <table border="1"> <tr><td> <p>画像2</p> <p><input type="checkbox" id="img2no" name="画像の掲載" value="なし" onclick="checkdis(this, ['img2a', 'img2b', 'img2c', 'img2d', 'img2e']);">該当なし</p> </td></tr> <tr><td>【掲載する画像の種類をお選び下さい。】 <ul> <li><input type="radio" id="img2a" name="画像2の種類" value="写真">写真</li> <li><input type="radio" id="img2b" name="画像2の種類" value="イラスト">イラスト</li> </ul> </td></tr> <tr><td>【画像の人物との関係をお選び下さい。】 <ul> <li><input type="radio" id="img2c" name="画像2の人物" value="本人">本人</li> <li><input type="radio" id="img2d" name="画像2の人物" value="ご家族">ご家族</li> </ul> </td></tr> <tr><td> 【ファイルをお選び下さい。】 <p align="center"> <span id="file2"><input type="file" name="画像2" id="img2e" size="45"></span> <span><input type="button" value="クリア" onclick="fileRefClear('file2'); return false;"></span> </p> </td></tr> <tr><td> <p>画像3</p> <p><input type="checkbox" id="img3no" name="画像の掲載" value="なし" onclick="checkdis(this, ['img3a', 'img3b', 'img3c', 'img3d', 'img3e']);">該当なし</p> </td></tr> <tr><td>【掲載する画像の種類をお選び下さい。】 <ul> <li><input type="radio" id="img3a" name="画像3の種類" value="写真">写真</li> <li><input type="radio" id="img3b" name="画像3の種類" value="イラスト">イラスト</li> </ul> </td></tr> <tr><td>【画像の人物との関係をお選び下さい。】 <ul> <li><input type="radio" id="img3c" name="画像3の人物" value="本人">本人</li> <li><input type="radio" id="img3d" name="画像3の人物" value="ご家族">ご家族</li> </ul> </td></tr> <tr><td> 【ファイルをお選び下さい。】 <p align="center"> <span id="file3"><input type="file" name="画像3" id="img3e" size="45"></span> <span><input type="button" value="クリア" onclick="fileRefClear('file3'); return false;"></span> </p> </td></tr> </table> </form> </body> </html>
- t_ohta
- ベストアンサー率38% (5238/13705)
<script type="text/javascript"> <!-- function checkdis(_this, targetN) { for (var i = 0; i < targetN.length;i++) { var tN = document.getElementById(targetN[i]); if(_this.checked == true) { tN.disabled = true; document.getElementById(targetN[i]).checked = false; } else { tN.disabled = false; } } fileRefClear('file2'); } function fileRefClear(oId) { var obj = document.getElementById(oId); var stO = obj.innerHTML; obj.innerHTML = stO; } // --> </script>
お礼
ご回答ありがとうございました。
補足
後出しで申し訳ないのですが、「画像2」のあとに「画像3」「画像4」…と続く場合はどのようにするのがいいのでしょうか？ fileRefClear('file2');のあとにfileRefClear('file3');と続けてみてもダメでした。 よろしくお願いします。
お礼
ご回答ありがとうございました。
補足
修正して実行してみました。 しかしまたIEでは参照ファイルがリセットされませんでした。 何かヒントにでもなればと思ってfirefoxをインストールしてブラウジングしてみましたが、やはりfirefoxでもchromeと同様に狙い通りの動作をしましたので、IEだけが問題のようです。