PHP程序员

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"))
        })
    });
上一篇 下一篇

猜你喜欢

热点阅读