動的なリンクの作成

<dl>
  <dt>23区南
  	<li class="all_check"><input type="checkbox">
  		<label>23区南すべてにチェックを入れる</label>
  	</li>
  	<li class="all_link">
  		<a href="">23区南全域で探す</a>
  	</li>
  </dt>
  <dd>
  	<ul>
  		<li>
  			<input type="checkbox" id="city-109" value="109" name="cities" disabled="disabled">
  			<label>
  				<a href="../../akiya/tokyo/list_13109_room.html">品川区</a>
  			</label>
  			<span class="13_109">（0）</span>
  		</li>
  		<li>
  			<input type="checkbox" id="city-110" value="110" name="cities" disabled="disabled">
  			<label>
  				<a href="../../akiya/tokyo/list_13110_room.html">目黒区</a>
  			</label>
  			<span class="13_110">（0）</span></li>
  		<li>
  			<input type="checkbox" id="city-111" value="111" name="cities">
  			<label>
  				<a href="../../akiya/tokyo/list_13111_room.html">大田区</a>
  			</label>
  			<span class="13_111">（4）</span>
  		</li>
  		<li>
  			<input type="checkbox" id="city-112" value="112" name="cities">
  			<label>
  				<a href="../../akiya/tokyo/list_13112_room.html">世田谷区</a>
  			</label>
  			<span class="13_112">（22）</span>
  		</li>
  	</ul>
  </dd>
</dl>

dt > .all_link > a （23区南全域で探す）をクリックした時に、
dd > li内のa全て（品川区、目黒区、大田区、世田谷区）をまとめたURLを動的に作成し、ページ遷移させたいです。

http://www.net.go.jp/akiya/tokyo/list_13109_room.html (品川区のみのとき)
http://www.net.go.jp/kanto/search/tokyo_list_room.html?tcd=13&cities=109&cities=110&cities=111&cities=112&rentLow=min&rentUp=max&walk=&bus=&rank=&elevator=
（品川区、目黒区、大田区、世田谷区をまとめて検索したとき）

リンクから「list_13109」を抜き出し
/kanto/search/tokyo_list_room.html?tcd=13&cities=109&cities=110
を生成する必要があるというのは分かるのですが、どのようなコードを書けばよいのでしょうか。
できればjQueryでお願いします！

行動規範の内容に同意します

回答2件

ベストアンサー

チェックボックスの値をクエリで投げるには配列でnameを設定しなければなりません。
下のHTMLで submit ボタンをクリックすると、パラメータがくっついてくることを確認できるはずです。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title></title>
5		<meta charset="UTF-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	</head>
8	<body>
9		<form action="" method="get">
10			<ul>
11				<li><label><input type="checkbox" name="k[]" value="1" /> 1</label></li>
12				<li><label><input type="checkbox" name="k[]" value="2" /> 2</label></li>
13				<li><label><input type="checkbox" name="k[]" value="3" /> 3</label></li>
14				<li><label><input type="checkbox" name="k[]" value="4" /> 4</label></li>
15				<li><label><input type="checkbox" name="k[]" value="5" /> 5</label></li>
16				<li><label><input type="checkbox" name="k[]" value="6" /> 6</label></li>
17				<li><label><input type="checkbox" name="k[]" value="7" /> 7</label></li>
18			</ul>
19			<p>
20				<button>
21					submit
22				</button>
23			</p>
24		</form>
25	</body>
26</html>
27```
28
29なので、FORM の 送信をプログラムで書くだけでいい。
30
31```html
32<!DOCTYPE html>
33<html>
34	<head>
35		<title></title>
36		<meta charset="UTF-8">
37		<meta name="viewport" content="width=device-width, initial-scale=1.0">
38	</head>
39	<body>
40		<form action="" method="get">
41			<p>
42				<label><input type="checkbox" id="all" />すべてチェック</label>
43			</p>
44			<ul>
45				<li><label><input type="checkbox" name="k[]" value="1" /> 1</label></li>
46				<li><label><input type="checkbox" name="k[]" value="2" /> 2</label></li>
47				<li><label><input type="checkbox" name="k[]" value="3" /> 3</label></li>
48				<li><label><input type="checkbox" name="k[]" value="4" /> 4</label></li>
49				<li><label><input type="checkbox" name="k[]" value="5" /> 5</label></li>
50				<li><label><input type="checkbox" name="k[]" value="6" /> 6</label></li>
51				<li><label><input type="checkbox" name="k[]" value="7" /> 7</label></li>
52			</ul>
53			<p>
54				<button>
55					submit
56				</button>
57			</p>
58		</form>
59		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
60		<script type="text/javascript">
61			$(function () {
62				// すべてチェック
63				$('#all').on('click', function () {
64					$(':checkbox[name^=k]').prop('checked', $(this).prop('checked'));
65					$(this).parents('form').submit();
66				});
67			});
68		</script>
69	</body>
70</html>
71```