用jq写全选、反选和不选

2020-10-23  本文已影响0人  lucky_yao
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <input type="checkbox" name="" id="" value="" />
        <button type="button">全选</button>
        <button type="button">不选</button>
        <button type="button">反选</button>
    </body>
    <script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $('button').eq(0).click(function(){
            $('input').each(function(a){
                $('input').eq(a).prop('checked', true)
            })
        })
        $('button').eq(1).click(function(){
            $('input').each(function(a){
                $('input').eq(a).prop('checked', false)
            })
        })
        $('button').eq(2).click(function(){
            $('input').each(function(){
                this.checked = !this.checked
            })
        })
    </script>
</html>
上一篇下一篇

猜你喜欢

热点阅读