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" />黒

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

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/04/26 01:34:40
  • 終了:2012/04/27 13:38:49

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/04/26 02:46:54

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>
他1件のコメントを見る
id:Cherenkov

<!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>
2012/04/26 10:47:32
id:sryou1985

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

2012/04/26 12:41:49

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません