批量操作复选框示例
本文档通过JavaScript实现了一个批量操作复选框的功能。当勾选或取消勾选顶部的'Toggle ALL'复选框时，页面上所有其他复选框的状态会随之改变；反之，如果所有单独的复选框都被选中，则'Toggle ALL'也会被自动选中，否则将被取消选中。此功能常用于网页表单中简化用户的操作。
<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#handle').click(function(){
if($(this).attr('checked')==true){
$('.toggle').attr('checked','true');
}
else{
$('.toggle').removeAttr('checked');
}
});
$('.toggle').click(function(){
if($('.toggle:checked').length==$('.toggle').length){
$('#handle').attr('checked','true');
}
else{
$('#handle').removeAttr('checked');
}
});
});
</script>
<style type='text/css'>
ul{
background-color:#ccc;
list-style:none;
margin 20px auto;
}
li{
padding:10px;
}
</style>
</head>
<body>
<ul>
<li>
<input type='checkbox' id='handle'>
<label for='handle'>
<strong> Toggle ALL</strong></label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> aaaaaaa</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> bbbbbbb</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> cccccccc</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> ddddddd</label>
</li>
</ul>
</body>
</html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#handle').click(function(){
if($(this).attr('checked')==true){
$('.toggle').attr('checked','true');
}
else{
$('.toggle').removeAttr('checked');
}
});
$('.toggle').click(function(){
if($('.toggle:checked').length==$('.toggle').length){
$('#handle').attr('checked','true');
}
else{
$('#handle').removeAttr('checked');
}
});
});
</script>
<style type='text/css'>
ul{
background-color:#ccc;
list-style:none;
margin 20px auto;
}
li{
padding:10px;
}
</style>
</head>
<body>
<ul>
<li>
<input type='checkbox' id='handle'>
<label for='handle'>
<strong> Toggle ALL</strong></label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> aaaaaaa</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> bbbbbbb</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> cccccccc</label>
</li>
<li>
<input type='checkbox' class='toggle'>
<label> ddddddd</label>
</li>
</ul>
</body>
</html>
扫一扫
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
