Comment sélectionner toutes les cases de la table en utilisant javascript

Script: -Comment sélectionner toutes les cases de la table en utilisant javascript

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#cbSelectAll").click(function() { 
       if (this.checked) { 
        $(':checkbox').each(function() { 
         this.checked = true; 
         var selectall = document.getElementsByClassName(".checkBoxClass"); 
         var cid = $(this).attr('id'); 
         console.log('cid' + cid); 
         var hidSelectAll = document.getElementById("hfSelectAll"); 
         var hidCustomer = document.getElementById("hfCustomerID"); 
         hidCustomer = ''; 
         var str = 'Select All'; 
         hidSelectAll.value = str; 
         console.log(hidSelectAll); 
        }); 
        $("#GridRows .checkBoxClass").change(function() { 
         if (!$(this).prop("checked")) { 
          $("#cbSelectAll").prop("checked", false); 
          var cid = $(this).attr('id'); 
          console.log('cid' + cid); 
          var hidSelectAll = document.getElementById("hfSelectAll"); 
          var str = 'Select All + unselected values'; 
          hidSelectAll.value = str; 
          console.log(hidSelectAll); 
         } 
        }); 
       } 
       else { 
        $(':checkbox').each(function() { 
         this.checked = false; 
         var hidSelectAll = document.getElementById("hfSelectAll"); 
         var str = 'UnSelect All'; 
         hidSelectAll.value = str; 
         console.log(hidSelectAll); 
        }); 
        $(".checkBoxClass").change(function() { 
         if (!$(this).prop("checked")) { 
          $("#cbSelectAll").prop("checked", false); 
          var hidSelectAll = document.getElementById("hfSelectAll"); 
          var str = 'unSelect All + selected values'; 
          hidSelectAll.value = str; 
          console.log(hidSelectAll); 
         } 
        }); 
       } 
      }); 
     }); 
    </script>

HTML: -

<body> 
     <h4>Number Of Records - <span>@ViewBag.ItemCount</span> </h4> 
     <div class="table-responsive" style="padding-left:20%;"> 
      <table class="table-fill" style="float:left;"> 
       <thead> 
        <tr> 
         <th class="text-left">        
          Select All 
          <div class="checkbox"> 
           <input style="margin-left:15px;" type="checkbox" id="cbSelectAll" /> 
          </div> 
         </th> 
         <th class="text-left" style="padding-left:27px;"> 
          First Name 
         </th> 
         <th class="text-left" style="padding-left:32px;"> 
          Last Name 
         </th> 
         <th class="text-left" style="padding-left:40px;padding-right: 60px;"> 
          Email-ID 
         </th> 
         <th class="text-left" style="padding-left:30px;padding-right: 40px;"> 
          Customer Type 
         </th> 
         <th class="text-left" style="padding-left:15px;"> 
          Customer Designation 
         </th> 
        </tr> 
       </thead> 
      </table> 
      <div id="GridRows" style="width:65%;"> 
      </div> 
     </div> 

     <div id="pager"></div> 
     <input type="hidden" id="currentPage"> 
     <input type="hidden" id="hfCustomerID"/> 
     <input type="hidden" id="hfSelectAll" /> 
    </body>

c'est html. Lignes générées dynamiquement à partir de l'appel jquery ajax pour éviter la perte de valeurs stockées dans un champ masqué lors du chargement de la page.

En cochant cette case, toutes les valeurs de la table de la même page sont sélectionnées. Comment enregistrer toutes les valeurs d'une table à partir d'une pagination multiple lorsque vous avez cliqué sur dans la case Sélectionner tout?

Quelles sont les options pour stocker toutes les valeurs de la table?

Source

2017-05-11 Shridhar Salunkhe

Pouvez-vous s'il vous plaît ajouter le code HTML de la page –

Vous pouvez si vous utilisez datatable.

$(document).ready(function() { 
var oTable = $('#example').dataTable({ 
    stateSave: true 
}); 

var allPages = oTable.fnGetNodes(); 

$('body').on('click', '#selectAll', function() { 
    if ($(this).hasClass('allChecked')) { 
     $('input[type="checkbox"]', allPages).prop('checked', false); 
    } else { 
     $('input[type="checkbox"]', allPages).prop('checked', true); 
    } 
    $(this).toggleClass('allChecked'); 
}) 
});

Il y a une autre option dire que vous devez ajouter même nom de classe sur toutes les cases à cocher et ajoutez ce code. (Si vous n'utilisez pas datatable).

var select_all = document.getElementById("select_all"); 
var checkboxes = document.getElementsByClassName("checkbox"); 
select_all.addEventListener("change", function(e){ 
    for (i = 0; i < checkboxes.length; i++) { 
    checkboxes[i].checked = select_all.checked; 
} 
}); 

for(var i = 0; i < checkboxes.length; i++) { 
checkboxes[i].addEventListener('change', function(e){ //".checkbox" change 
//uncheck "select all", if one of the listed checkbox item isunchecked 
    if(this.checked == false){ 
     select_all.checked = false; 
    } 
if(document.querySelectorAll('.checkbox:checked').length ==checkboxes.length){ 
     select_all.checked = true; 
    } 
}); 
}

Source

2017-05-11 09:28:15

En fait, votre checkAll (..) est accrochée sans aucune pièce jointe.

1) Ajouter onchange gestionnaire d'événements

2) Modification du code pour gérer cocher/décocher

function addRow(tableID) { 
 

 
    var table = document.getElementById(tableID); 
 

 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 

 
    var cell1 = row.insertCell(0); 
 
    var element1 = document.createElement("input"); 
 
    element1.type = "checkbox"; 
 
    element1.name = "chkbox[]"; 
 
    cell1.appendChild(element1); 
 

 
    var cell2 = row.insertCell(1); 
 
    cell2.innerHTML = rowCount; 
 

 
    var cell3 = row.insertCell(2); 
 
    cell3.innerHTML = rowCount; 
 

 
    var cell4 = row.insertCell(3); 
 
    cell4.innerHTML = rowCount; 
 

 
    var cell5 = row.insertCell(4); 
 
    cell5.innerHTML = rowCount; 
 

 
    var cell6 = row.insertCell(5); 
 
    cell6.innerHTML = rowCount; 
 
} 
 

 
function deleteRow(tableID) { 
 
    try { 
 
     var table = document.getElementById(tableID); 
 
     var rowCount = table.rows.length; 
 

 
     for (var i = 1; i < rowCount; i++) { 
 
      var row = table.rows[i]; 
 
      var chkbox = row.cells[0].childNodes[0]; 
 
      if (null != chkbox && true == chkbox.checked) { 
 
       table.deleteRow(i); 
 
       rowCount--; 
 
       i--; 
 
      } 
 
     } 
 
    } catch (e) { 
 
     alert(e); 
 
    } 
 
} 
 

 
function checkAll(ele) { 
 
    var checkboxes = document.getElementsByTagName('input'); 
 
    if (ele.checked) { 
 
     for (var i = 0; i < checkboxes.length; i++) { 
 
      if (checkboxes[i].type == 'checkbox') { 
 
       checkboxes[i].checked = true; 
 
      } 
 
     } 
 
    } else { 
 
     for (var i = 0; i < checkboxes.length; i++) { 
 
      console.log(i) 
 
      if (checkboxes[i].type == 'checkbox') { 
 
       checkboxes[i].checked = false; 
 
      } 
 
     } 
 
    } 
 
}

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
 
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
 
<TABLE id="dataTable" border="1"> 
 
    <tr> 
 
     <th> 
 
      <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> 
 
     </th> 
 
     <th>Make</th> 
 
     <th>Model</th> 
 
     <th>Description</th> 
 
     <th>Start Year</th> 
 
     <th>End Year</th> 
 
    </tr> 
 
</TABLE>

Source

2017-05-11 09:31:48

Comment sélectionner toutes les cases de la table en utilisant javascript

Répondre

Questions connexes