Select all checkboxes but with a condition

Question

Select all checkboxes but with a condition

Navigation

#1 by (2 votes)

1

I have the following code where I select all the checkboxes in a table.

Here is my table

<div class="table-responsive row">
  <table id="TablaCargaOP" class="table table-bordered ">
      <thead>
          <tr class="bg-primary" id="EncabCargaOP">
              <th width="5%">OP</th>
              <th width="5%">Item</th>
              <th width="18%">CodPza</th>
              <th width="20%">Desc.</th>
              <th width="5%">Cant.</th>
              <th width="8%">Medidas.</th>
              <th class="text-center" width="12%">Nivel</th>
              <th width="8%">Pedido</th>
              <th width="5%">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" onchange="checkAll(this)" id="selectAll">
                    <label class="form-check-label"for="selectAll">  <i class="fa fa-arrows-v" aria-hidden="true"></i></label>
                </div>
                </th>

          </tr>
      </thead>
  </table>

</div>

Method to select all the checkboxes.This method takes it out of here Fiddle

<script>
function checkAll(ele) {
    var checkboxes = document.getElementsByTagName('input');
    var celdas = $('#tableDespacho tbody > tr').find('td');
    var status = $(celdas[7]).html();

    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;
            }
        }
    }
}
</script>

What I want is to be able to add a condition if the state is found SI this is not marked.

javascript html

asked by MoteCL 26.09.2018 в 20:22

source

1 answer

create 5 elements dynamically Convert Image saved in resource.mipmap to Bitmap

score 2 · Accepted Answer

I think what you're looking for is something like this:

function checkAll(ele) {
    var checkboxes = document.getElementsByTagName('input');
    var celdas = $('#TablaCargaOP tbody > tr');
    
    if (ele.checked) {
        for (var i = 1; i < checkboxes.length; i++) {
            var status = $(celdas[i - 1]).find('td').eq(7).html();            
            if (checkboxes[i].type == 'checkbox' && status == 'SI') {
                checkboxes[i].checked = true;
            }
        }
    } else {
        for (var i = 0; i < checkboxes.length; i++) {            
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = false;
            }
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive row">
  <table id="TablaCargaOP" class="table table-bordered ">
      <thead>
          <tr class="bg-primary" id="EncabCargaOP">
              <th width="5%">OP</th>
              <th width="5%">Item</th>
              <th width="18%">CodPza</th>
              <th width="20%">Desc.</th>
              <th width="5%">Cant.</th>
              <th width="8%">Medidas.</th>
              <th class="text-center" width="12%">Nivel</th>
              <th width="8%">Pedido</th>
              <th width="5%">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" onchange="checkAll(this)" id="selectAll">
                    <label class="form-check-label"for="selectAll">  <i class="fa fa-arrows-v" aria-hidden="true"></i></label>
                </div>
                </th>
          </tr>
      </thead>
      <tbody>
        <tr class="bg-primary" id="EncabCargaOP">
              <td width="5%">OP</td>
              <td width="5%">Item</td>
              <td width="18%">CodPza</td>
              <td width="20%">Desc.</td>
              <td width="5%">Cant.</td>
              <td width="8%">Medidas.</td>
              <td class="text-center" width="12%">Nivel</td>
              <td width="8%">SI</td>
              <td width="5%">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input">                    
                </div>
                </td>
          </tr>
          <tr class="bg-primary" id="EncabCargaOP">
              <td width="5%">OP</td>
              <td width="5%">Item</td>
              <td width="18%">CodPza</td>
              <td width="20%">Desc.</td>
              <td width="5%">Cant.</td>
              <td width="8%">Medidas.</td>
              <td class="text-center" width="12%">Nivel</td>
              <td width="8%">NO</td>
              <td width="5%">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input">                    
                </div>
                </td>
          </tr>
      </tbody>
  </table>
</div>