CodingMania

CodingMania

2014/5/27

特定のチェックボックスをチェックすると、さらに追加で項目を表示します

label の class="select"をチェックすると非表示になっていた選択項目が表示されます。

表示を切り替える部分はclass="mod_search_table_more"内に記述。
特定の選択にはclass="select"をlabelに追加。
ラジオボタンの場合は、↓
指定のラジオボタンをチェックすると、さらに追加で項目を表示します

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="form.js"></script>

[form.js]JavaScript

//選択されたら表示
$(function(){
	var selectlabel = $("label.select");
	var selectitem = $("label.select input");
	var morearea = $(".mod_search_table_more");
	var moreinput = $(".mod_search_table_more input");
  //初期化
  $(moreinput).attr("checked", false);
  $(morearea).css("display", "none");


	$(selectlabel).click(function(){
	 if($(selectitem).prop('checked')){
     $(morearea).slideDown();
				}else{
 	  $(moreinput).attr("checked", false);
     $(morearea).slideUp();
		}
 });
});

HTMl

<div class="mod_search">
<form action="" method="">
<div class="mod_search_table" id="search">
<table>
<tbody><tr>
<th scope="row">
地域
</th>
<td class="area">
<label><input type="checkbox" value="1" name="category_1">&nbsp;北海道・東北</label>
<label><input type="checkbox" value="1" name="category_6">&nbsp;関東</label>
<label><input type="checkbox" value="1" name="category_8">&nbsp;甲信越・北陸</label>
<label><input type="checkbox" value="1" name="category_2">&nbsp;東海</label>
<label class="select"><input type="checkbox" value="1" name="category_3">&nbsp;関西</label>
<label><input type="checkbox" value="1" name="category_10">&nbsp;中国</label>
<label><input type="checkbox" value="1" name="category_7">&nbsp;四国</label>
<label><input type="checkbox" value="1" name="category_5">&nbsp;九州・沖縄</label>
</td>
</tr>
</table>
<div class="mod_search_table_more">
<table>
<tr>
<th scope="row">
都道府県</th>
<td>
<label><input type="checkbox" value="1" name="area_1">&nbsp;大阪</label>
<label><input type="checkbox" value="1" name="area_2">&nbsp;京都</label>
<label><input type="checkbox" value="1" name="area_3">&nbsp;兵庫</label>
<label><input type="checkbox" value="1" name="area_4">&nbsp;奈良</label>
<label><input type="checkbox" value="1" name="area_5">&nbsp;和歌山</label>
<label><input type="checkbox" value="1" name="area_6">&nbsp;滋賀</label>
</td>
</tr>
</table>
<!-- /mod_search_table_more --></div>
<table>
<tr>
<th scope="row">
カラー
</th>
<td class="color">
<label>
<input type="checkbox" value="1" name="color_1">&nbsp;ホワイト</label>
<label><input type="checkbox" value="1" name="color_2">&nbsp;ブラック</label>
<label><input type="checkbox" value="1" name="color_3">&nbsp;ブルー</label>
<label><input type="checkbox" value="1" name="color_4">&nbsp;レッド</label>
<label><input type="checkbox" value="1" name="color_5">&nbsp;イエロー</label>
<label><input type="checkbox" value="1" name="color_6">&nbsp;グリーン</label>
</td>
</tr>
</tbody></table>
<!-- /mod_search_table --></div>
</form>
<!-- /mod_search --></div>

CSS

.mod_search form {
  margin: 0 0 100px 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid #999999;
  border-top: 2px solid #999999;
}
.mod_search form label{
  cursor:pointer;
}
.mod_search form input{
  vertical-align:middle;
}
.mod_search form table {
  width: 100%;
}
.mod_search form table th,
.mod_search form table td{
  border-bottom: 1px solid #999999;
}
.mod_search form table th {
  padding: 20px;
  width:20%;
  font-weight:bold;
  color:#000;
  vertical-align: top;
}
.mod_search form table td {
  padding: 20px;
  width:80%;
  vertical-align: top;
}

.mod_search form table td.area label {
    float: left;
    margin: 0 0 5px 0;
    width: 25%;
}
.mod_search form table td.color label {
  margin:0 20px 0 0;
}

/* mod_search_table_more */
.mod_search_table_more label{
  margin:0 20px 0 0;
}

© CodingMania.net