電子書籍の厳選無料作品が豊富！

jQuery　変数の使い方について

解決済

  • 質問者：megane5050
  • 質問日時：
  • 回答数：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">
<!--
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>

通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

■ $("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;
    • good
    • 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
  • 回答日時：

こんにちは。



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

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

で取得できます。

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

var $hidden = $(this).parent().parent().find('input:hidden');
でも行けます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2013/05/17 16:31

No.1

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



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

補足日時：2013/05/09 12:10
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報