Jq五行代码实现全选与反选
2020-10-19 本文已影响0人
php转go
HTML代码
<input type="checkbox" id="check_all">全选
<input type="checkbox" id="check_reverse">反选
<br>
<input class="checkbox" type="checkbox" >1
<br>
<input class="checkbox" type="checkbox" >2
<br>
<input class="checkbox" type="checkbox" >3
JS代码
使用前必须先引入jq
<script src="/lib/jquery/1.9.1/jquery.min.js"></script>
//全选
$("#check_all").on('click',function(){
if($(this).is(":checked")) {//全选中
$(".checkbox").prop('checked',true);
}else {//全选向选否时,取消全选中
$(".checkbox").prop('checked',false);
}
});
//反选
$("#check_reverse").on('click',function(){
$(".checkbox").each(function(){
$(this).prop('checked',!$(this).is(":checked"))
})
});