Bulk Select

Für matze

by joquery

HTML

<div>
    <!--
    
    0 = no Mode
    1 = all visible selected
    2 = all all selected
    3 = all not printed
            
    -->
    <input type="hidden" id="currentMode" value="0" />
    <span>
        <a href="#" class="visibleSelectBtn" id="selectVisible">Select visible</a>
        <a href="#" class="visibleSelectBtn" id="deSelectVisible" style="display:none">Deselect visible</a>
    </span>
    <span class="divider">|</span>
    <span>
        <a href="#" class="allSelectBtn" id="selectAll">Select All</a>
        <a href="#" class="allSelectBtn" id="deSelectAll" style="display:none">Deselect All</a>
    </span>
    <span class="divider">|</span>
    <span>
        <a href="#" id="selectNonPrinted">Select non printed</a>
    </span>
</div>

<table>
    <thead>
        <tr>
            <th></th>
            <th>Le 1</th>
            <th>Le 2</th>
            <th>Le 3</th>
            <th>PrintCount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td class="printCount">0</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td class="printCount">0</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td class="printCount">1</td>
        </tr>
    </tbody>
</table>

CSS

table {
    margin: 10px;
}

td,th {
    padding: 5px;
    border: 1px solid #cacaca;
}

JavaScript

$(document).ready(function() {
    
    var $selectAll = $("#selectAll"),
        $deSelectAll = $("#deSelectAll"),
        $selectVisible = $("#selectVisible"),
        $deSelectVisible= $("#deSelectVisible");
    
    var toggleSelectionLinks = function(showSelectAll, showSelectVisible) {
      if (showSelectAll === true) {
            $selectAll.show();
            $deSelectAll.hide();
        } else {
            $selectAll.hide();
            $deSelectAll.show();
        }
        
        if (showSelectVisible === true) {
            $selectVisible .show();
            $deSelectVisible.hide();
        } else {
            $selectVisible .hide();
            $deSelectVisible.show();
        }
};
        

    $(".allSelectBtn").on("click", function() {
        var $hfMode = $("#currentMode");
            
        var $cbs = $("table").find("input[type=checkbox]");

        if ($(this).attr("id") === "selectAll") {                            
            $cbs.each(function(index, item) {
                $(item).prop("checked", true);
            });
            toggleSelectionLinks(false, true);
            $hfMode.val(2);
        } 

        if($(this).attr("id") === "deSelectAll") {
            $cbs.each(function(index, item) {
                $(item).prop("checked", false);
            });
            toggleSelectionLinks(true, true);
            $hfMode.val(0);
        }
    });
    
    
    
    $(".visibleSelectBtn").on("click", function() {
        var $hfMode = $("#currentMode");
        var $this = $(this);
        var $cbs = $("table").find("input[type=checkbox]");

        if ($this.attr("id") === "selectVisible") {      
            
            $cbs.each(function(index, item) {
                $(item).prop("checked", true);
            });
            
            toggleSelectionLinks(true, false);
            $hfMode.val(1);
        } 

        if($this.attr("id") === "deSelectVisible") {
            
            $cbs.each(function(index, item)...