BLOG

親子チェックボックスシンプルなjs

PUBLISHED AT 07/14/2015 / IN CATEGORY web

checkbox用js

不動産サイトなんかで親子関係に成っているチェックボックスってありますのよね。

 

check

こんなやつです。

そんなときはこんなんで一括チェックしてしまいましょう。
 

HTML

<ul>
	<li><input type="checkbox" id="ch1"><label for="ch1">チェック1</label>
		<ul class="ml20">
			<li><input type="checkbox" id="ch2"><label for="ch2">チェック2</label>
				<ul class="ml20">
					<li><input type="checkbox" id="ch3"><label for="ch3">チェック3</label></li>
					<li><input type="checkbox" id="ch4"><label for="ch4">チェック4</label></li>
					<li><input type="checkbox" id="ch5"><label for="ch5">チェック5</label></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

 
jQuery

$(function(){
	$('ul input[type="checkbox"]').change(function(){
	    if ($(this).is(':checked')) {
	        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
	    }
	    else {
	        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
	        $(this).parents('li').each(function(){
	            $(this).children('input[type="checkbox"]').prop('checked', false);
	        });
	    }
	});
})

サンプル