<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>
相关文章
- 08-16Android中实现一个可拖动的悬浮按钮，点击弹出菜单的功能
- 08-16用jQuery实现旋转木马效果的轮播图及解决按钮的闪烁问题
- 08-16springboot中邮箱验证按钮实现60秒后可重新获取（防止刷新）以及防重复发送
- 08-16JQuery UI中Datepicker实现单选年份或月份的案例
- 08-16jQuery实现的全选、反选和不选功能
- 08-16jQuery实现的全选、反选和不选功能
- 08-16jQuery结合Thymeleaf模板中的fragment标签实现Ajax异步加载数据
- 08-16vue中两行代码实现全选及子选项全部选中，则全选按钮选中，反之有一个没选中，就取消选中全选按钮
- 08-16Hmtl页面中Jquery实现复选框选择-全选-全不选-反选-提交
- 08-16bootstrap 后端分页 实现 按钮全选 以及表格外全选按钮