Question

我正在使用MDL Checkbox，我需要一次删除所有值。由于我做了一些研究，看起来旧方法已被弃用：Deprecations for MDL Data Table Checkbox和mdl-data-table - selectable不能再使用了。

HTML代码：

  <div class="load_customer">
      <table class="mdl-data-table mdl-js-data-table  mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--7-col-phone">
      <thead>
        <tr>
        <th>
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" id="table-header" for="table-input">
                <input type="checkbox" id="table-input" class="mdl-checkbox__input" />
              </label>
        </th>
        <th>Sr. No</th>
         <th>Name</th>
         <th>Gender</th>
         <th>Date of Birth</th>
        <th>Anniversary</th>
       <th>Address</th>
       <th>Phone</th>
        </tr>
      </thead>
      <tbody>
      <?php
      $i=1;
      $select = $pdo->query("SELECT * FROM `accounts` ORDER BY `id` DESC");
      while($fetch = $select->fetch()){
      ?>
        <tr>
            <td>
             <label class="mdl-checkbox child_checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" data="<?php echo $fetch['id'];?>" for="row[<?php echo $i;?>]">
                <input type="checkbox" id="row[<?php echo $i;?>]" class="mdl-checkbox__input" />
            </label>
            </td>
            <td><?php echo $i;?></td>
          <td><?php echo $fetch['name'];?> </td>
          <td><?php echo $fetch['gender'];?></td>
          <td><?php echo $fetch['dob'];?></td>
          <td><?php echo $fetch['anniversary'];?></td>
          <td><?php echo $fetch['address'];?></td>
          <td><?php echo $fetch['phone'];?></td>
        </tr>
       <?php
       $i++;
        }
       ?>
      </tbody>
    </table>
    </div>

所以在手动添加它之后，它工作正常，直到我用ajax加载表。然后一切都停止了。我可以检查主复选框＃table-header，但检查所有复选框（MaterialCheckbox.check（））的函数不再有效。我检查了控制台和放大器控制台没有错误。

Javascript代码

var arr = [];
$(document).on("click","#table-header input",function() {

    var all_elements = document.querySelectorAll('.child_checkbox');

        for(var i=0, n=all_elements.length; i<n; i++){
            var element = all_elements[i];

            if($('#table-header input').is(":checked")) {

                element.MaterialCheckbox.check();

                var ids = element.getAttribute("data");
                arr.push(ids);

        }
          else {
                element.MaterialCheckbox.uncheck();

                var removeItem = element.getAttribute("data");
                arr = $.grep(arr, function(value) {
                return value != removeItem;
                });
          }
        }

    });

我正在使用componentHandler.upgradeAllRegistered（）和Checkbox工作正常，但它不会遍历所有复选框。

$.post("load_customer.php",function(data){
            $(".load_customer").html(data);
            componentHandler.upgradeAllRegistered();            
    });

请帮助我。谢谢。

MDL复选框功能MaterialCheckbox.check（）不适用于ajax内容

0 个答案: