jQuery　変数の使い方について

解決済

質問者：megane5050
質問日時：2013/04/18 15:52
回答数：3件

jQuery　変数の使い方について

【やりたいこと】
ラジオボタンが複数ある為現在のアクションをまとめたい。

■ $("input:radio[name='radio01']:checked").val();
の'radio01'の部分に変数を使いたい。

■document.forms["MON"].hradio02.value
の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。

http://kaicoo.blogspot.jp/2012/03/query_30.html
等を参考に元のソースから
JSをまとめてみましたが、うまくいきません。

jQuery内の変数の記述方法を
教えていただけませんでしょうか？

よろしくお願いいたします。

★JSをまとめたサンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<script src="jquery.js"></script>
<script type="text/javascript" language="JavaScript">

</script>
</head>
<body>
<table border="1">
<FORM name="MON">
<tr>
<td>
結果:
</td>
<td>
<input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好
<input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良
<input type="hidden" name="hradio01" value="未入力です。">
</td>
</tr>

<tr>
<td>
結果2:
</td>
<td>
<input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好
<input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良
<input type="hidden" name="hradio02" value="未入力です。">
</td>
</tr>
</table>
</Form>
</body>
</html>

★元のソースのサンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<script src="jquery.js"></script>

<script type="text/javascript" language="JavaScript">

</script>
<script type="text/javascript" language="JavaScript">

</script>

</head>
<body>
<table border="1">
<FORM name="MON">
<tr><td>
結果:
</td>
<td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好
<input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良
<input type="hidden" name="hradio01" value="未入力です。">
</td>
</tr>

<tr>
<td>
結果2:
</td>
<td>
<input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好
<input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良
<input type="hidden" name="hradio02" value="未入力です。">
</td>
</tr>
</table>
</Form>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Ogre7077
回答日時：2013/04/18 18:39

■ $("input:radio[name='radio01']:checked").val();

クリック対象の obj があるのだから、値は obj.value で取れるのに...

JavaScript には Perl や bash のような文字列内変数置換機能はありません。
なので、文字列連結でがんばりましょう。
引用符がごっちゃにならないように注意

var name = "radio01";
$("input:radio[name='" + name + "']:checked").val();

■ document.forms["MON"].hradio02.value

object["name"] の書式は、"name"を単純に変数に置換できます。
object.name の書式は、object["name"] と書き換えることにより、同上
というわけで

var formName = "MON";
var paramName = "hradio02";
document.forms[formName][paramName].value;

- 0
- 件

通報する

この回答へのお礼

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

function setVal(obj) {
var formname = obj.form.name;
var radioname = obj.getAttribute("Name");
document.forms[formname]["h"+radioname].value = $("input:radio[name='" + radioname + "']:checked").val();}

でできました。
大変助かりました。お礼申し上げます。

通報する

お礼日時：2013/05/09 12:17

No.3

回答者： LancerVII
回答日時：2013/05/09 14:37

こんにちは。

<label>内にradioが入ったのであれば

var $hidden = $(this).parents('td').find('input:hidden');

で取得できます。

クリックされた親要素のtdまで遡り、その中のinput type="hidden"を取得するという動きです。

var $hidden = $(this).parent().parent().find('input:hidden');
でも行けます。

- 0
- 件

通報する

この回答へのお礼

親要素という奴ですね！！
大変勉強になりました。

ありがとうございました!

通報する

お礼日時：2013/05/17 16:31

No.1

回答者： LancerVII
回答日時：2013/04/18 16:28

こんにちは。

jQueryを利用するなら以下のようにすればお望みの動作が可能です。
(変数にしたいという質問の回答にはなっていません・・・）
動作原理はコメントを参考にしてください。
HTMLの変更点はinputタグのonClickを除去
JavaScriptをjQueryを使うように修正

==== JavaScript
$().ready ( function() {
// input type="radio"がクリックされたら
$('input:radio').click ( function() {
// クリックされたラジオを持つ親要素の中からinput type="hidden"の要素を取得
var $hidden = $(this).parent().find('input:hidden');
// 設定前を表示してみる
alert ( $hidden.val() );
// クリックされた要素のvalueを取得
var value = $(this).val();
// hidden要素にセット
$hidden.val(value);
// 設定後を表示してみる(選択した内容が表示されるはず)
alert ( $hidden.val() );
});
});

==== HTML
<form name="MON">
<table border="1">
<tr>
<td>
結果:
</td>
<td>
<input type="radio" name="radio01" value="良好">良好
<input type="radio" name="radio01" value="不良"> 不良
<input type="hidden" name="hradio01" value="未入力です。">
</td>
</tr>
<tr>
<td>
結果2:
</td>
<td>
<input type="radio" name="radio02" value="良好">良好
<input type="radio" name="radio02" value="不良"> 不良
<input type="hidden" name="hradio02" value="未入力です。">
</td>
</tr>
</table>
</form>

この回答への補足

ご回答ありがとうございます！！

IE6用に<label>タグをラジオボタンにつけた場合、
hideenに値が格納されないのですが、

// クリックされたラジオを持つ親要素の中からinput type="hidden"の要素を取得
var $hidden = $(this).parent().find('input:hidden');

<label>タグをつけても、input type="hidden"の要素を探せる方法はありますでしょうか？

★ソース

<label for="radiocheck01_01">
<input id="radiocheck01_01" type="radio" name="radio01" value="良好">良好</label>

<label for="radiocheck01_02"><input id="radiocheck01_02" t type="radio" name="radio01" value="不良"> 不良</label>

<input type="hidden" name="hradio01" value="未入力です。">