jquery实现全选、不选、反选的两种方法

首先需要引入jQuery
1.官网jquery压缩版引用地址:
　3.1.1版本:

　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

3.0.0版本:

　　<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

　2.1.4版本:

　　<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

2.百度压缩版引用地址:

　　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

3.微软压缩版引用地址:

　　<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

亲测都可用,谷歌的不太好用,便不再加进去.
页面布局

 <div class="music">
 <input type="checkbox" name="music1" value="小白兔">小白兔<br>
 <input type="checkbox" name="music2" value="小燕子">小燕子<br>
 <input type="checkbox" name="music3" value="哈巴狗">哈巴狗<br>
 <input type="checkbox" name="music4" value="小青蛙">小青蛙<br>
 <input type="checkbox" name="music5" value="数鸭子">数鸭子<br><br>
 </div>
 <div class="check">
 <button class="btn1">全选</button>
 <button class="btn2">全不选</button>
 <button class="btn3">反选</button>
 </div>

重要操作

 <script>
 $(function(){
 $('.check .btn1').click(function(){//全选
$('.music :checkbox').prop('checked',true);
 });
 
 $('.check .btn2').click(function(){//全不选
$('.music :checkbox').prop('checked',false);
 });
 
 $('.check .btn3').click(function(){//反选
$('.music :checkbox').each(function(){
 $(this).prop('checked',!$(this).prop('checked'));
 });
 });
 });
 </script>