jQuery簡單實現全選與反選

時間 2019-12-12

原文原文鏈接

全選與反選相信在實際的開發中常常用到,下面demo一段代碼;html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq簡單實現全選與反選</title>
    <script src="jquery-3.1.0.js"></script>
</head>
<body>
<div id="dv">
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
    <input type="checkbox"/><br/>
</div>
<hr/>
<input type="button" id="selectAll" value="全選"/>
<input type="button" id="noSelect" value="全不選"/>
<input type="button" id="select" value="反選"/>
<script>
    //    全選
    $ ( '#selectAll' ).click ( function () {
        $ ( '#dv>input' ).each ( function ( i , v ) { //函數的參數能夠不傳
            this.checked = true;
//                return false;   //return false能夠跳出當前循環,此時函數只執行一次
        } )
    } )
    //    全不選
    $ ( '#noSelect' ).click ( function () {
        $ ( '#dv>input' ).each ( function ( i , v ) {
            this.checked = false;
        } )
    } )
    //    反選
    $ ( '#select' ).click ( function () {
        $ ( '#dv>input' ).each ( function ( i , v ) {
            this.checked = ! this.checked;  //此時的選中狀態與當前的相反
        } )
    } )

</script>
</body>
</html>

相關標籤/搜索