1. 程式人生 > >複選框checkbox控制多個內容的顯示與隱藏

複選框checkbox控制多個內容的顯示與隱藏

當點選複選框的時候,對應的內容會根據複選框的選中與否進行展示,checkbox複選款可動態迴圈增加,對應的內容展示區的內容要與複選框一一對應

程式碼如下:

樣式表部分:

<style type="text/css">
	.b4,.b2,.b3{ display: none}
	.show{ display: block}
</style>

html部分:

<table class="a0">
		<tr>
			<td><input type="checkbox" class="a1" checked>a1</td>
			<td><input type="checkbox" class="a1">a2</td>
			<td><input type="checkbox" class="a1">a3</td>
			<td><input type="checkbox" class="a1">a4</td>
		</tr>
	</table>
	<div class="b0">
	<div class="b1">b1</div>
	<div class="b2">b2</div>
	<div class="b3">b3</div>
	<div class="b4">b4</div>
	</div>

指令碼部分:
<script type="text/javascript" language="javascript">
$(function(){
		$(".a0 tr td").each(function(index, element) {
			
				$(this).children("input").click(function(){

						if($(this).is(':checked'))
							{ 
								$(".b0 div:eq("+index+")").show()

							}else{
								$(".b0 div:eq("+index+")").hide()
							}
console.log(this)
					})                
            });
})
</script> 

請務必引用jquery,建議1.9X版本