こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jQuery 変数の使い方について

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">
<!--
function setVal(obj) {
var formname = obj.form.name;
var radioname = obj.getAttribute('name');
alert(formname);
alert(radioname);

//選択したラジオのvalueをhiddenに格納する
document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val();
alert(document.forms[formname].h '+ radioname +'.value);
}
//-->
</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">
<!--
function setVal_01(obj) {
document.forms["MON"].hradio01.value =
$("input:radio[name='radio01']:checked").val();
alert(document.forms["MON"].hradio01.value);
}
//-->
</script>
<script type="text/javascript" language="JavaScript">
<!--
function setVal_02(obj) {
document.forms["MON"].hradio02.value =
$("input:radio[name='radio02']:checked").val();
alert(document.forms["MON"].hradio02.value);
}
//-->
</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>

投稿日時 - 2013-04-18 15:52:39

QNo.8048763

すぐに回答ほしいです

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

■ $("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;

投稿日時 - 2013-04-18 18:39:26

お礼

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

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:02

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

こんにちは。

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

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

で取得できます。

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

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

投稿日時 - 2013-05-09 14:37:34

お礼

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

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

投稿日時 - 2013-05-17 16:31:29

ANo.1

こんにちは。

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>

投稿日時 - 2013-04-18 16:28:05

補足

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


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="未入力です。">

投稿日時 - 2013-05-09 12:10:59

あなたにオススメの質問