结构如下: <input type=checkbox value="10" name="10" class="ckhd" />10
<p>
<input type=checkbox value="1001" name="1001" class="cklst"/>1001
<input type=checkbox value="1002" name="1002" class="cklst"/>1002
<input type=checkbox value="1003" name="1003" class="cklst"/>1003
</p>
<input type=checkbox value="20" name="20" class="ckhd" />20
<p>
<input type=checkbox value="2001" name="2001" class="cklst"/>2001
<input type=checkbox value="2002" name="2002" class="cklst"/>2002
<input type=checkbox value="2003" name="2003" class="cklst"/>2003
</p> Jquery 实现
点击10 1001,1002,1003全选或取消
点击1001,1002,1003其中一个 10选中
1001,1002,1003都没选 10取消选中
同样 20 2001,2002,2003也要实现此功能
小弟才学Jquery 请各位指教!
<p>
<input type=checkbox value="1001" name="1001" class="cklst"/>1001
<input type=checkbox value="1002" name="1002" class="cklst"/>1002
<input type=checkbox value="1003" name="1003" class="cklst"/>1003
</p>
<input type=checkbox value="20" name="20" class="ckhd" />20
<p>
<input type=checkbox value="2001" name="2001" class="cklst"/>2001
<input type=checkbox value="2002" name="2002" class="cklst"/>2002
<input type=checkbox value="2003" name="2003" class="cklst"/>2003
</p> Jquery 实现
点击10 1001,1002,1003全选或取消
点击1001,1002,1003其中一个 10选中
1001,1002,1003都没选 10取消选中
同样 20 2001,2002,2003也要实现此功能
小弟才学Jquery 请各位指教!
$(document).ready(function(){
$("#abc").click(function(){
$(".cklst").attr("checked",$(this).attr("checked"));
});
});
<input type="checkbox" value="10" name="10" class="ckhd" id="abc" />10
<p>
<input type="checkbox" value="1001" name="1001" class="cklst"/>1001
<input type="checkbox" value="1002" name="1002" class="cklst"/>1002
<input type="checkbox" value="1003" name="1003" class="cklst"/>1003
</p>
<input type="checkbox" value="20" name="20" class="ckhd" id="b"/>20
<p>
<input type="checkbox" value="2001" name="2001" class="cklst1"/>2001
<input type="checkbox" value="2002" name="2002" class="cklst1"/>2002
<input type="checkbox" value="2003" name="2003" class="cklst1"/>2003
</p> 选择器,你用name也可以,用class也可以。
$(document).ready(function(){
$("#abc").click(function(){
$(".cklst").attr("checked",$(this).attr("checked"));
});
$(".cklst").click(function(){
if($(this).attr("checked"))
$("#abc").attr("checked","true");
else
$("#abc").attr("checked","");
});
});刚才没看全。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<style type="text/css">
</style>
<script src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function(){
$('.ckhd').click(function(){
if($(this).is(':checked')){
$(this).next('p').children('.cklst').attr('checked', true);
}else{
$(this).next('p').children('.cklst').attr('checked', false);
}
});
$('.cklst').click(function(){
if($(this).is(':checked')){
$(this).parent('p').prev('.ckhd').attr('checked', true);
}else{
if($(this).siblings('.cklst:checked').length == 0){
$(this).parent('p').prev('.ckhd').attr('checked', false);
}
}
});
});
</script>
</head>
<body>
<input type=checkbox value="10" name="10" class="ckhd" />10
<p>
<input type=checkbox value="1001" name="1001" class="cklst"/>1001
<input type=checkbox value="1002" name="1002" class="cklst"/>1002
<input type=checkbox value="1003" name="1003" class="cklst"/>1003
</p>
<input type=checkbox value="20" name="20" class="ckhd" />20
<p>
<input type=checkbox value="2001" name="2001" class="cklst"/>2001
<input type=checkbox value="2002" name="2002" class="cklst"/>2002
<input type=checkbox value="2003" name="2003" class="cklst"/>2003
</p>
</body>
</html>主要是熟练使用选择器和筛选方法
<head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript">
$(document).ready(function() {
$(".ckhd").click(function() {
var checked = $(this).attr("checked");
$(this).next("p").find("input").attr("checked", checked);
}); $(".cklst").click(function() {
var count = 0;
$(this).siblings().andSelf().each(function() {
if ($(this).is(":checked"))
count++;
});
$(this).parent().prev().attr("checked", Boolean(count));
});
});
</script></head>
<body>
<input type="checkbox" value="10" name="10" class="ckhd" />10
<p>
<input type="checkbox" value="1001" name="1001" class="cklst" />1001
<input type="checkbox" value="1002" name="1002" class="cklst" />1002
<input type="checkbox" value="1003" name="1003" class="cklst" />1003
</p>
<input type="checkbox" value="20" name="20" class="ckhd" />20
<p>
<input type="checkbox" value="2001" name="2001" class="cklst" />2001
<input type="checkbox" value="2002" name="2002" class="cklst" />2002
<input type="checkbox" value="2003" name="2003" class="cklst" />2003
</p>
</body>
</html>