アプリ版：「スタンプのみでお礼する」機能のリリースについて

２つのjavascriptを１つにするには

締切済

  • 質問者：kajiya16
  • 質問日時：
  • 回答数：5件

教えてください。

下記のフォームでチェックボックスにチェックを入れると

　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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： t_ohta
  • 回答日時：

<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');と続けてみてもダメでした。
よろしくお願いします。

補足日時：2013/01/29 05:30
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

通報する
お礼日時：2013/02/02 07:57

No.3

  • 回答者： yuu_x
  • 回答日時：

以前提示したコードは リセットしてるだけなので、画像がいくつ増えても問題ないですよ。



文字化けに関しては、文字コードが 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-transitio …
<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>

補足日時：2013/01/29 16:27
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

通報する
お礼日時：2013/02/02 07:58

No.6

  • 回答者： yuu_x
  • 回答日時：

う～む、なんてこった。

どうしようか

試しに 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 );の挿入場所あってますでしょうか…？；

補足日時：2013/01/30 22:09
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

通報する
お礼日時：2013/02/02 07:58

No.7

  • 回答者： yuu_x
  • 回答日時：

わかったかも。



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として書き込ませて頂きます。

補足日時：2013/01/31 22:03
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

通報する
お礼日時：2013/02/02 07:59

No.8

  • 回答者： yuu_x
  • 回答日時：

> IEは参照ファイル消えず



defaultValue が拾えないのかな？

この回答への補足

修正して実行してみました。
しかしまたIEでは参照ファイルがリセットされませんでした。

何かヒントにでもなればと思ってfirefoxをインストールしてブラウジングしてみましたが、やはりfirefoxでもchromeと同様に狙い通りの動作をしましたので、IEだけが問題のようです。

補足日時：2013/02/01 03:10
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

通報する
お礼日時：2013/02/02 07:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報