人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryでチェックボックスのチェックされた値を全て取得し、「1,2」ではなく「1|2」という形に変換することは可能でしょうか?
以下は、チェックボックスをクリックするたびに選択された値を全て取得する処理です。
<script type="text/javascript">
//チェックされている値の取得「1,2」で取得します
function GetVals(){
var AllVals = new Array;
$("input[name=color_id]:checked").map(function() {
AllVals.push($(this).val());
});
alert(AllVals);
}
$(function(){
$("input[name=color_id]").click(function() {
GetVals();
});
});
</script>
<input type="checkbox" name="color_id" value="1" />赤
<input type="checkbox" name="color_id" value="2" />黒

分かる方がいましたら、教えていただけないでしょうか?
よろしくお願い致します。

●質問者: チョロQ
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
ベストアンサー

http://jsfiddle.net/cherenkov/Gby9V/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetVals(){
 var AllVals = $('input[name="color_id"]:checked').map(function() {
 return this.value;
 });
 AllVals = $.makeArray(AllVals).join('|');
 return AllVals;
}
$(function(){
 $('input[name="color_id"]').change(function() {
 alert(GetVals());
 });
});
</script>
</head>
<body>
<input type="checkbox" name="color_id" value="1" /><input type="checkbox" name="color_id" value="2" /></body>
</html>

チョロQさんのコメント
素早いご回答ありがとうございます。 もし、チェックボックスの種類を3つにしたとしますと次のような形になりますか? >|| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function GetColor(){ var AllVals = $('input[name="color_id"]:checked').map(function() { return this.value; }); AllVals = $.makeArray(AllVals).join('|'); return AllVals; } $(function(){ $('input[name="color_id"]').change(function() { alert(GetColor()); }); }); function GetCategory(){ var AllVals = $('input[name="category_id"]:checked').map(function() { return this.value; }); AllVals = $.makeArray(AllVals).join('|'); return AllVals; } $(function(){ $('input[name="category_id"]').change(function() { alert(GetCategory()); }); }); function GetService(){ var AllVals = $('input[name="service_id"]:checked').map(function() { return this.value; }); AllVals = $.makeArray(AllVals).join('|'); return AllVals; } $(function(){ $('input[name="service_id"]').change(function() { alert(GetService()); }); }); </script> </head> <body> <input type="checkbox" name="color_id" value="1" />赤 <input type="checkbox" name="color_id" value="2" />黒 <input type="checkbox" name="category_id" value="1">男物 <input type="checkbox" name="category_id" value="2">女物 <input type="checkbox" name="service_id" value="1">季節 <input type="checkbox" name="service_id" value="2">お祝い </body> </html> ||< 初歩的なご質問で申し訳ないのですが、「1|2」という数字のどの変数に代入されているのでしょうか?

Cherenkovさんのコメント
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=book021-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4873113229" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe> >|html| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function getChecked(name) { var AllVals = $('input[name="' + name + '"]:checked').map(function() { return this.value; }); AllVals = $.makeArray(AllVals).join('|'); return AllVals; } function getParam(){ var colorId = getChecked('color_id'); var categoryId = getChecked('category_id'); var serviceId = getChecked('service_id'); return 'http://localhost/eigazuki/results/title:/time:0?300/country_id:' + categoryId + '/genre_id:' + serviceId; } $(function(){ $('input[name]:checkbox').change(function() { alert(getParam()); }); }); </script> </head> <body> <input type="checkbox" name="color_id" value="1" />赤 <input type="checkbox" name="color_id" value="2" />黒 <br> <input type="checkbox" name="category_id" value="1">男物 <input type="checkbox" name="category_id" value="2">女物 <br> <input type="checkbox" name="service_id" value="1">季節 <input type="checkbox" name="service_id" value="2">お祝い </body> </html> ||<

チョロQさんのコメント
共同作成者の「ぱんたまさん」も同じような質問をしていたようで、混乱させてしまい申し訳ございませんでした。 おかげさまで、思い通りの動作をすることができました。 あとは、取得した「'http://localhost/eigazuki/results/title:/time:0?300/country_id:' + categoryId + '/genre_id:' + serviceId;」のファイルを読み込むだけですので、頑張ります! ほんとうにありがとうございます!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ