1. 首页
  2. SEO技术

jQuery CheckBox复选框全选全取消功能

gooood个人博客网站

jquery特效

JavaScript

jQuery CheckBox复选框全选全取消功能
html代码:
<ul> <li><input type="checkbox" /> Select all</li> <ul> <li><input type="checkbox" value="1"/>Item 1</li> <li><input type="checkbox" value="2"/>Item 2</li> <li><input type="checkbox" value="3"/>Item 3</li> <li><input type="checkbox" value="4"/>Item 4</li> <li><input type="checkbox" value="5"/>Item 5</li> </ul> </ul> JavaScript代码:
$(document).ready(function(){ $('#select_all').on('click',function(){ if(this.checked){ $('.checkbox').each(function(){ this.checked = true; }); }else{ $('.checkbox').each(function(){ this.checked = false; }); } }); $('.checkbox').on('click',function(){ if($('.checkbox:checked').length == $('.checkbox').length){ $('#select_all').prop('checked',true); }else{ $('#select_all').prop('checked',false); } }); });

本文来自SEO排名优化_SEO技术_SEO资讯网,经授权后发布,转载请联系原作者。原文链接:http://www.ylzug.com/js/426.html