首先需要引入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>