|
![](/images/resource/spacer.gif) |
|
จะทำ checkbox แบบคลิกข้อย่อยแล้วให้หัวข้อเกิด checked |
|
![](/images/resource/viewboard_01.gif?v=1001) |
|
|
![](/images/resource/viewboard_03.gif?v=1001) |
![](/images/resource/viewboard_04.gif?v=1001) |
|
Code (PHP)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul style="list-style-type: none;">
<li>
<label>
<input type="checkbox" class="checkbox-parent" name="name" value=""> Parent
</label>
<ul style="list-style-type: none;">
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-1
</label>
</li>
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-2
</label>
</li>
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-3
</label>
</li>
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-4
</label>
</li>
</ul>
</li>
</ul>
<ul style="list-style-type: none;">
<li>
<label>
<input type="checkbox" class="checkbox-parent" name="name" value=""> Parent
</label>
<ul style="list-style-type: none;">
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-1
</label>
</li>
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-2
</label>
</li>
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-3
</label>
</li>
<li>
<label>
<input type="checkbox" class="checkbox-child" name="name" value=""> Child-4
</label>
</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('.checkbox-parent').click(function(){
if($(this).is(':checked')){
$(this).closest('li').closest('li').find('.checkbox-child').prop('checked', true);
}else{
$(this).closest('li').closest('li').find('.checkbox-child').prop('checked', false);
}
});
$('.checkbox-child').click(function(){
if($(this).closest('ul').find('.checkbox-child:checked').length >= 1 ){
$(this).parent().parent().parent().parent().closest('li').find('.checkbox-parent').prop('checked', true);
}else{
$(this).parent().parent().parent().parent().closest('li').find('.checkbox-parent').prop('checked', false);
}
});
});
</script>
</body>
</html>
|
![](/images/resource/blockviewtopic_01.gif?v=1001) |
![](/images/resource/blockviewtopic_02.gif?v=1001) |
![](/images/resource/blockviewtopic_03.gif?v=1001) |
![](/images/resource/blockviewtopic_04.gif?v=1001) |
Date :
2015-07-01 21:07:36 |
By :
Krungsri |
|
![](/images/resource/blockviewtopic_06.gif?v=1001) |
![](/images/resource/blockviewtopic_07.gif?v=1001) |
![](/images/resource/blockviewtopic_08.gif?v=1001) |
![](/images/resource/blockviewtopic_09.gif?v=1001) |
|
|
![](/images/resource/viewboard_06.gif?v=1001) |
![](/images/resource/viewboard_07.gif?v=1001) |
|
![](/images/resource/viewboard_08.jpg?v=1001) |
![](/images/resource/viewboard_09.gif?v=1001) |
|
|
|
![](/images/digitalocean-banner.jpg)
|
Load balance : Server 01
|