<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="myModal" aria-hidden="true" style="display:none">
	<div class="modal-body change">
		<div class="">
			<div class="change__box" id="modalForm">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closeModal()">×</button>

				<p>市区を選択してください。　※複数選択できます。</p>
				<div class="change__box-all">
					<label><input type="checkbox" class="chka" />横浜市 すべての地域（000）</label>
				</div>
				<ul class="change__box-list">
					<li><label><input type="checkbox" name="area" value="100" class="chkb" />港南区（100）</label></li>
					<li><label><input type="checkbox" name="area" value="200" class="chkb" />栄区（200）</label></li>
					<li><label><input type="checkbox" name="area" value="300" class="chkb" />磯子区（300）</label></li>
					<li><label><input type="checkbox" name="area" value="400" class="chkb" />金沢区（400）</label></li>
					<li><label><input type="checkbox" name="area" value="100" class="chkb" />南区（100）</label></li>
					<li><label><input type="checkbox" name="area" value="100" class="chkb" />その他（100）</label></li>
				</ul>
				<div class="wrapper_btn_popup">
					<button type="button" class="btn btn-primary" style="text-align:center" onclick="closeModal()">この条件で検索</button>
				</div>
				<script type="application/javascript">
					function getTextOnly(text) {
						let i = text.indexOf("（");
						return text.substr(0, i);
					}
					$('.chka').click(function() {
						$('.chkb').prop('checked', this.checked);
						var total = 0;
						var strChosen = "";
						if (this.checked) {
							$('.chkb').each(function(i, obj) {
								total += parseInt($(this).val());
								if (strChosen == "") {
									strChosen = getTextOnly($(this).parent().text());
								} else strChosen += ', ' + getTextOnly($(this).parent().text());
							});
						}
						$("#total").html(total);
						if (total > 0) {
							$("#totalNumber").html(strChosen);
							$("#bottom_bar").show();
						} else {
							$("#totalNumber").html('港南区');
							$("#bottom_bar").hide();
						}

					})

					//".checkbox" change
					$('.chkb').change(function() {
						if (false == $(this).prop("checked")) {
							$(".chka").prop('checked', false);
						}
						if ($('.chkb:checked').length == $('.chkb').length) {
							$(".chka").prop('checked', true);
						}
						var $checkeds = $('input[class=chkb]:checked');
						var total = 0;
						var strChosen = "";
						$checkeds.each(function(i, obj) {

							total += parseInt($(this).val());

							if (strChosen == "") {
								strChosen = getTextOnly($(this).parent().text());
							} else strChosen += ',' + getTextOnly($(this).parent().text());

						});
						if (total == 0) {
							$("#total").html(000);
						} else if (total < 10) {
							$("#total").html("00" + total);
						} else if (total < 100) {
							$("#total").html("0" + total);
						} else {
							$("#total").html(total);
						}

						if (total > 0) {
							$("#totalNumber").html(strChosen);
							$("#bottom_bar").show();
						} else {

							$("#totalNumber").html('港南区');
							$("#bottom_bar").hide();
						}
					});
				</script>

			</div>
			<!--change__box-->

			<div id="bottom_bar" class="change__bar" style="display:none">
				<div class="wrapper">
					<span class="change__bar-count">該当物件数<strong><span id="total">000<span></strong>件</span>
					<input class="change__bar-clear" type="button" value="条件をクリア" />
					<input class="change__bar-button fas" type="button" value="&#xf002 この条件で検索" onclick="closeModal();"/>

				</div>
				<!--wrapper-->

			</div>
			<!--change__bar-->

		</div>
		<!--change-->
	</div>
</div>
