Jquery zaznacz wszystkie pola wyboru w tabeli

Mam skrypt, który powinien sprawdzić wszystkie pola wyboru w tabeli. Sprawdza je po raz pierwszy, odznacza je później. Jednak gdy próbuję je ponownie sprawdzić, nic się nie dzieje.Jquery zaznacz wszystkie pola wyboru w tabeli

jQuery:

$('#selectAll').click(function(e){ 
    var table= $(e.target).closest('table'); 
    $('td input:checkbox',table).attr('checked',e.target.checked); 
});

HTML:

<table> 
    <tr> 
     <th> 
      <input type="checkbox" id="selectAll" /> 
     </th> 
     <th> 
      hi! 
     </th> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="1"/> 
     </td> 
     <td> 
      hi! 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="2"/> 
     </td> 
     <td> 
      hi! 
     </td> 
    </tr> 
</table>

oto skrzypce zachowania:

http://jsfiddle.net/EEJrU/

Dlaczego nie jest on pracy po kliknięciu raz?

Źródło

2013-10-03 Snowburnt

Działa z kodem jako jeśli używasz JQuery 1.7.2 zamiast 1.10.1 –

Trzeba użyć .prop() zamiast .attr()

$('#selectAll').click(function(e){ 
    var table= $(e.target).closest('table'); 
    $('td input:checkbox',table).prop('checked',this.checked); 
});

Demo: Fiddle

Attributes vs. Properties

Źródło

2013-10-03 16:52:37

Wiedziałem, że to jest coś prostego! Dzięki! – Snowburnt

Ładny, zwięzły, przenośny kod. +1 Zauważ, że miałem problem z zaznaczeniem pola wyboru "zaznacz wszystko" po zdarzeniu kliknięcia, więc musiałem dodać następującą linię do funkcji: e.stopPropagation(); – wloescher

Aby wywołać zdarzenie zmiany we wszystkich pozostałych polach wyboru, należy dodać .change() na końcu wiersza. Tak jak w: $ ('td input: checkbox', table) .prop ("checked", this.checked) .change(); – Luk6e

Może to być przydatne na różnicy między podporą() i attr(). Uwaga w tym wierszu tego artykułu: .prop() vs .attr():

"Wartość atrybutu odzwierciedla domyślny zamiast bieżącego stanu widocznego (z wyjątkiem niektórych starszych wersji IE, przez co rzeczy jeszcze trudniejsze) .Atrybut nic nie mówi o tym, czy pole wyboru na stronie jest zaznaczone. "

Zasadniczo użyj funkcji prop() zamiast attr().

Źródło

2013-10-03 17:16:35 shenge86

<HTML> 
    <HEAD> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    </HEAD> 
    <BODY> 

    <table border="1"> 
    <tr> 
     <th><input type="checkbox" id="selectall"/></th> 
     <th>Cell phone</th> 
     <th>Rating</th> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td> 
     <td>BlackBerry Bold 9650</td> 
     <td>2/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td> 
     <td>Samsung Galaxy</td> 
     <td>3.5/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td> 
     <td>Droid X</td> 
     <td>4.5/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td> 
     <td>HTC Desire</td> 
     <td>3/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td> 
     <td>Apple iPhone 4</td> 
     <td>5/5</td> 
    </tr> 
    </table> 

    </BODY> 
    </HTML> 




<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      oTable = $('#datatable').dataTable({ 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 
      }); 

      $("#selectall").click(function() { 
       var checkAll = $("#selectall").prop('checked'); 
        if (checkAll) { 
         $(".case").prop("checked", true); 
        } else { 
         $(".case").prop("checked", false); 
        } 
       }); 

      $(".case").click(function(){ 
       if($(".case").length == $(".case:checked").length) { 
        $("#selectall").prop("checked", true); 
       } else { 
        $("#selectall").prop("checked", false); 
       } 

      }); 
     }); 




    </script>

Źródło

2014-06-04 05:14:56

Wygląda na to, że zadziała, ale jest nadmierny. Nie musisz wstawiać instrukcji if, aby określić, czy chcesz, aby wszystkie pola były zaznaczone, po prostu potrzebujesz wszystkich pól, aby pasowały do selectAll. Tak mi się podoba, że ma zaznaczenie, aby zmodyfikować sprawdzony status zaznaczenia wszystkiego, jeśli ktoś sam wybierze wszystko samodzielnie. – Snowburnt

Proste rozwiązanie jQuery, z detekcją sprawdzanych wejść wewnątrz tabeli, a zmiany stanu na głównym (selectAll) wyboru:

<table class="table"> 
    <thead> 
     <tr> 
      <th> 
       <div class="checkbox"> 
        <input type="checkbox" id="selectAll"> 
        <label for="selectAll"></label> 
       </div> 
      </th> 
      <th>Email</th> 
      <th>Join date <i class="arrow bottom"></i></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="active"> 
      <td> 
       <div class="checkbox"> 
        <input type="checkbox" id="tr-checkbox1"> 
        <label for="tr-checkbox1"></label> 
       </div> 
      </td> 
      <td>[email protected]</td> 
      <td>21 Oct, 2016 at 11:29 pm</td> 
     </tr> 
     <tr> 
      <td> 
       <div class="checkbox"> 
        <input type="checkbox" id="tr-checkbox2"> 
        <label for="tr-checkbox2"></label> 
       </div> 
      </td> 
      <td>[email protected]</td> 
      <td>21 Oct, 2016 at 11:29 pm</td> 
     </tr> 
    </tbody> 
</table>  

$(document).ready(function() { 
    var $selectAll = $('#selectAll'); // main checkbox inside table thead 
    var $table = $('.table'); // table selector 
    var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body 
    var $tdCheckboxChecked = []; // checked checbox arr 

    //Select or deselect all checkboxes on main checkbox change 
    $selectAll.on('click', function() { 
     $tdCheckbox.prop('checked', this.checked); 
    }); 

    //Switch main checkbox state to checked when all checkboxes inside tbody tag is checked 
    $tdCheckbox.on('change', function(){ 
     $tdCheckboxChecked = $table.find('tbody input:checkbox:checked');//Collect all checked checkboxes from tbody tag 
     //if length of already checked checkboxes inside tbody tag is the same as all tbody checkboxes length, then set property of main checkbox to "true", else set to "false" 
     $selectAll.prop('checked', ($tdCheckboxChecked.length == $tdCheckbox.length)); 
    }) 
});

Demo: jsfiddle

Źródło

2017-01-07 08:12:02 ykosinets

Jquery zaznacz wszystkie pola wyboru w tabeli

Odpowiedz

Powiązane problemy