Skip to main content
se añadieron 67 caracteres en el cuerpo
Origen Enlace
Edu3D
  • 967
  • 4
  • 10

Te doy un ejemplo un poco diferente de lo que tienes pero funciona de forma más simple:

// Seleccionar/Deseleccionar TODO a la vez
Seleccionar_Todo = false;

$(document).ready(function() {


  $(".objetos").on('click', function() {
    $(this).toggleClass("seleccionados");
    if ($('.objetos').length == $('.seleccionados').length) {
      Seleccionar_Todo = true;
    } else {
      Seleccionar_Todo = false;
    }
  });


  $("#Boton_Marca_Seleccionar_Todo").click(function() {
    if (Seleccionar_Todo == false) {
      $(".objetos").addClass("seleccionados");
      Seleccionar_Todo = true;
    } else {
      $(".objetos").removeClass("seleccionados");
      Seleccionar_Todo = false;
    }
  });

});
.lista {
  display: block;
  padding: 1cm;
}

.objetos {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px solid #555;
  background: #428bca;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.seleccionados {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="lista">
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos seleccionados">

  </div>
</div>
<button id="Boton_Marca_Seleccionar_Todo">
SELECCIONAR TODO
</button>

Te doy un ejemplo un poco diferente de lo que tienes pero funciona de forma más simple:

// Seleccionar/Deseleccionar TODO a la vez
Seleccionar_Todo = false;

$(document).ready(function() {


  $(".objetos").on('click', function() {
    $(this).toggleClass("seleccionados");
    if ($('.objetos').length == $('.seleccionados').length) {
      Seleccionar_Todo = true;
    } else {
      Seleccionar_Todo = false;
    }
  });


  $("#Boton_Marca_Seleccionar_Todo").click(function() {
    if (Seleccionar_Todo == false) {
      $(".objetos").addClass("seleccionados");
      Seleccionar_Todo = true;
    } else {
      $(".objetos").removeClass("seleccionados");
      Seleccionar_Todo = false;
    }
  });

});
.objetos {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px solid #555;
  background: #428bca;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.seleccionados {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="lista">
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos seleccionados">

  </div>
</div>
<button id="Boton_Marca_Seleccionar_Todo">
SELECCIONAR TODO
</button>

Te doy un ejemplo un poco diferente de lo que tienes pero funciona de forma más simple:

// Seleccionar/Deseleccionar TODO a la vez
Seleccionar_Todo = false;

$(document).ready(function() {


  $(".objetos").on('click', function() {
    $(this).toggleClass("seleccionados");
    if ($('.objetos').length == $('.seleccionados').length) {
      Seleccionar_Todo = true;
    } else {
      Seleccionar_Todo = false;
    }
  });


  $("#Boton_Marca_Seleccionar_Todo").click(function() {
    if (Seleccionar_Todo == false) {
      $(".objetos").addClass("seleccionados");
      Seleccionar_Todo = true;
    } else {
      $(".objetos").removeClass("seleccionados");
      Seleccionar_Todo = false;
    }
  });

});
.lista {
  display: block;
  padding: 1cm;
}

.objetos {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px solid #555;
  background: #428bca;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.seleccionados {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="lista">
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos seleccionados">

  </div>
</div>
<button id="Boton_Marca_Seleccionar_Todo">
SELECCIONAR TODO
</button>

Origen Enlace
Edu3D
  • 967
  • 4
  • 10

Te doy un ejemplo un poco diferente de lo que tienes pero funciona de forma más simple:

// Seleccionar/Deseleccionar TODO a la vez
Seleccionar_Todo = false;

$(document).ready(function() {


  $(".objetos").on('click', function() {
    $(this).toggleClass("seleccionados");
    if ($('.objetos').length == $('.seleccionados').length) {
      Seleccionar_Todo = true;
    } else {
      Seleccionar_Todo = false;
    }
  });


  $("#Boton_Marca_Seleccionar_Todo").click(function() {
    if (Seleccionar_Todo == false) {
      $(".objetos").addClass("seleccionados");
      Seleccionar_Todo = true;
    } else {
      $(".objetos").removeClass("seleccionados");
      Seleccionar_Todo = false;
    }
  });

});
.objetos {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 3px solid #555;
  background: #428bca;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.seleccionados {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="lista">
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos">

  </div>
  <div class="objetos seleccionados">

  </div>
</div>
<button id="Boton_Marca_Seleccionar_Todo">
SELECCIONAR TODO
</button>