Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

Jquery checkbox SelectAll UnselectAll issue

on

Dear stackoverflow all~
Help me Jquery code in Below~
Jquery UnselectAll code error...
Explanation:
Focus(UnselectAll checkbox)!!!
select click checkbox id="invertChecked"
Change type td color to red by

<html>

<head>
  <title>Excel自核資料刪除(For產線)</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>


<body>
  <div class="container">
    <br />
    <div class="table-responsive">
      <h3 align="center">Excel自核資料刪除(For產線)</h3><br />
      <div class="table-responsive">
        <table class="table table-bordered" id="tbl">
          <thead>
            <tr>
              <th width="210px" align="center">
                <input type="checkbox" id="invertChecked" class="btn btn-danger btn-xs">反選
                <input type="checkbox" name="delete_all1" id="delete_all1" class="btn btn-danger btn-xs" />
                <button type="刪除" name="delete_all" id="delete_all" class="btn btn-danger btn-xs"><?echo "&nbsp";?>刪除<?echo "&nbsp";?></button> 工號
                <?echo "&nbsp";?>
              </th>

              <th width="" align="center">部門</th>
              <th width="" align="center">中文姓名</th>
              <th width="" align="center">英文姓名</th>
              <th width="" align="center">考核區間</th>
              <th width="" align="center">工作態度</th>
              <th width="" align="center">工作績效</th>
              <th width="" align="center">工作品質</th>
              <th width="" align="center">本質技能</th>
              <th width="" align="center">總分</th>
              <th width="" align="center">實際狀況</th>
              <th width="" align="center">權限值</th>
              <th width="" align="center">隸屬</th>
            </tr>
          </thead>
          <tbody>
            <?php
                for($i=1;$i<=mysql_num_rows($data);$i++)
    		{
                    $rs=mysql_fetch_row($data);
    							
                     echo '
                                <tr>
                                    <td>
                                        <input type="checkbox" name="del[]" id="del[]" class="delete_checkbox" value="'.$rs[0].'" />'.$rs[0].'
                                    </td>
                                    <td align="center">'.$rs[1].'</td>
                                    <td align="center">'.$rs[2].'</td>
                                    <td align="center">'.$rs[3].'</td>
                                    <td align="center">'.$rs[4].'</td>
                                    <td align="center">'.$rs[5].'</td>
                                    <td align="center">'.$rs[6].'</td>
                                    <td align="center">'.$rs[7].'</td>
                                    <td align="center">'.$rs[8].'</td>
                                    <td align="center">'.$rs[9].'</td>
                                    <td align="center">'.$rs[10].'</td>		
                                    <td align="center">'.$rs[11].'</td>	
                                    <td align="center">'.$rs[13].'</td>									
    								
                                </tr>
                    ';
                  }
                ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

</html>
<style>
  .hilite {
    background-color: #FF0000;
  }
  
  .removeRow {
    background-color: #FF0000;
    color: #FFFFFF;
  }
</style>
<script>
  var $tbl = $('#tbl');
  var $bodychk = $tbl.find('tbody input:checkbox');

  $(function() {
    $bodychk.on('change', function() {
      if ($(this).is(':checked')) {
        $(this).closest('tr').addClass('hilite');
      } else {
        $(this).closest('tr').removeClass('hilite');
      }
    });

    $tbl.find('thead input:checkbox').change(function() {
      var c = this.checked;
      $bodychk.prop('checked', c);
      $bodychk.trigger('change');
    });
  });


  $(document).ready(function() {

    $('.delete_checkbox').click(function() {
      if ($(this).is(':checked')) {
        $(this).closest('tr').addClass('hilite');
      } else {
        $(this).closest('tr').removeClass('hilite');
      }
    });

    $('#delete_all').click(function() {
      var checkbox = $('.delete_checkbox:checked');
      if (checkbox.length > 0) {
        var checkbox_value = [];
        $(checkbox).each(function() {
          checkbox_value.push($(this).val());
        });

        $.ajax({
          url: "delete.php",
          method: "POST",
          data: {
            checkbox_value: checkbox_value
          },
          success: function() {
            $('.removeRow').fadeOut(1500);
          }
        });
      } else {
        alert("刪除選取方塊一定要選取");
      }
    });

  });


  $('#invertChecked').change(function() {
    if ($(this).is(':checked')) {
      $('#del[]').children(':checkbox').each(function() {
        $(this).prop('checked', $(this).is(':checked') ? false : true);

      });
    }
  });
</script>

Comments

Post a Comment