valメソッドは、こちらを読むと、単純にvalueの値を返すようです。
(設定もできます)
全ての要素のvalue属性を返す。
jQuery1.2では、selectボックスにも値をセットできるようになった。
via:val(val)
というわけで、さっそく試してみました。
<html>
<head>
<title>Jquery.bindテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
</head>
<body>
<div>
<input type="text" id="baka" value="">
</div>
<div>
<input type="radio" value="1" name="foo">first
<input type="radio" value="2" name="foo">second
</div>
<div>
<input type="checkbox" value="1" name="bar">first contact
<input type="checkbox" value="2" name="bar">second contact
</div>
<div>
<textarea id="txtarea" cols="15" rows="5"></textarea>
</div>
<div>
<select id="slct">
<option value=""></option>
<option value="apple_val">apple</option>
<option value="banana_val">banana</option>
</select>
</div>
<input type="button"
value="Run"
id="hoge"
>
<script
type="text/javascript"
>
$("#hoge").bind(
'click'
, function(){
//textboxの値の取得
console.log($("#baka").val());
//ラジオボタンの値を取得
//何も選択されていないと「undefined」が返ってくる。
console.log($("input[name=foo]:checked").val());
//checkboxの各値を取得
$("input:checkbox[name=bar]:checked").each(
function(index,aval){
console.log(aval.value);
}
);
//selectboxの値を取得
console.log($("#slct").val());
//textareaの値を取得
console.log($("#txtarea").val());
}
);
</script>
</body>
</html> |
textbox、selectボックス、textareaの各値を取得することはできたのですが、問題は、checkboxと、radioボタンの値の取得方法
radioボタンの取得方法は、こちらを参考にさせていただいた。
/********************************************************
ラジオボタン
****************************************************** */
//↓femaleにchecked=”checked”された状態になる
//valのカッコの中要注意
$(”input[name=color]“).val(['2'])
//チェックされた値の取得
//tmpにチェックされているvalueの値が取得できる
var tmp = $(”input[name=color]:checked”).val();
via:jQueryでラジオボタン、チェックボックスの値を取得する方法
確かにこれで取得することができました。
一方で、checkboxの方ですが、同ブログでも紹介されていて実装してみたのですが、うまくいかず、違う方法がないのかなーっと探っていたところ、ありました。
HTMLタグのチェックボックスタグに name=”check[]” とした場合、どのようにJavascript側で処理をすればいいのか
・・・省略・・・
$(”:checkbox[name^='check']:checked”).each(function(){
alert($(this).val());
});
via:jquery チェックボックス グループ処理
ここで、どうしても納得がいかない点があり、
なぜ変数名に[]を追加するのか？
ということ。
確かに、PHPでは
このような方法で、値を取得するが、JavaScriptで果たして必要なのだろうか？
で、ためしに一番最初に紹介したプログラムで実行してみたところ、無事にcheckboxにチェックが入っている項目の値だけを取得することができたので、[]がなくてもオッケーじゃーんみたいな。
0 コメント:
コメントを投稿