-3

Necesito hacer un botón que diga "Seleccionar todo" y que cuando se le dé click se seleccionen todos los checkbox y cambie su nombre a "Deseleccionar todo" para que cuando se le dé otra vez click se deseleccionen todos y cambie el nombre a "Seleccionar todo". ¿Cómo le podría hacer?

Lo hice con dos botones: uno para seleccionar todo y otro para deseleccionar todo, pero se me hace que con un botón para hacer todo eso se me haría más eficiente.

Así lo tengo con dos botones:

$(document).ready(function() {
  $('#BtnSeleccionar').click(function() {
    $('#meses input[type=checkbox]').prop("checked", true);
  });

  $('#BtnDeseleccionar').click(function() {
    $('#meses input[type=checkbox]').prop("checked", false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="meses" id="meses">
  <div class="reci-header">Seleccione los meses:</div>
  <div class="col1">
    <input type="checkbox" name="mes1" value="01"> Enero<br>
    <input type="checkbox" name="mes4" value="04"> Abril<br>
    <input type="checkbox" name="mes7" value="07"> Julio<br>
    <input type="checkbox" name="mes10" value="10"> Octubre<br>
  </div>
  <div class="col1">
    <input type="checkbox" name="mes2" value="02"> Febrero <br>
    <input type="checkbox" name="mes5" value="05"> Mayo<br>
    <input type="checkbox" name="mes8" value="08"> Agosto<br>
    <input type="checkbox" name="mes11" value="11"> Nov.<br>
  </div>
  <div class="col1">
    <input type="checkbox" name="mes3" value="03"> Marzo <br>
    <input type="checkbox" name="mes6" value="06"> Junio <br>
    <input type="checkbox" name="mes9" value="09"> Sept. <br>
    <input type="checkbox" name="mes12" value="12"> Dic. <br>
  </div>
  <input type="button" id="BtnSeleccionar" value="Seleccionar todo">
  <input type="button" id="BtnDeseleccionar" value="Deseleccionar todo">
</div>

8
  • Y qué has intentado ? Primero intenta, luego pregunta.
    – lois6b
    el 27 jun. 2017 a las 15:16
  • En php te digo ya que no lo vas a hacer. PHP es un lenguaje de servidor, no te va a servir para interactuar con los botones de un formulario. El lenguaje importante aquí es javascript.
    – Muriano
    el 27 jun. 2017 a las 15:19
  • @lois6b Las condicionales, lo he intentado de varias formas que he investigado, pero no me jala, por eso pregunta si tenían una idea más o menos.
    – Ominous
    el 27 jun. 2017 a las 15:21
  • Creo que esto funciona, en donde te da error? el 27 jun. 2017 a las 15:21
  • 1
    Ya entiendo, un solo boton, el 27 jun. 2017 a las 15:22

1 respuesta 1

4

Puedes tener una variable flag que sea un bool, que te diga si esta seleccionado o no, y en dependencia de esta variable seleccionar todos o no y cambiarle el nombre del boton con jquery con $.val().

$(document).ready(function() {
  selected = true;
  $('#BtnSeleccionar').click(function() {
    if (selected) {
      $('#meses input[type=checkbox]').prop("checked", true);
      $('#BtnSeleccionar').val('Deseleccionar');
    } else {
      $('#meses input[type=checkbox]').prop("checked", false);
      $('#BtnSeleccionar').val('Seleccionar');
    }
    selected = !selected;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="meses" id="meses">
  <div class="reci-header">Seleccione los meses:</div>
  <div class="col1">
    <input type="checkbox" name="mes1" value="01"> Enero<br>
    <input type="checkbox" name="mes4" value="04"> Abril<br>
    <input type="checkbox" name="mes7" value="07"> Julio<br>
    <input type="checkbox" name="mes10" value="10"> Octubre<br>
  </div>
  <div class="col1">
    <input type="checkbox" name="mes2" value="02"> Febrero <br>
    <input type="checkbox" name="mes5" value="05"> Mayo<br>
    <input type="checkbox" name="mes8" value="08"> Agosto<br>
    <input type="checkbox" name="mes11" value="11"> Nov.<br>
  </div>
  <div class="col1">
    <input type="checkbox" name="mes3" value="03"> Marzo <br>
    <input type="checkbox" name="mes6" value="06"> Junio <br>
    <input type="checkbox" name="mes9" value="09"> Sept. <br>
    <input type="checkbox" name="mes12" value="12"> Dic. <br>
  </div>
  <input type="button" id="BtnSeleccionar" value="Seleccionar todo">
</div>

2
  • Hola Daniel. Nunca respondas solo con codigo. el codigo no es la respuesta, es una herramienta. Pon una clara explicacion de qué tiene mal el autor, o que debe hacer... y acompañalo de codigo.. Un saludo
    – lois6b
    el 27 jun. 2017 a las 15:28
  • Si, gracias, me entretuve tanto haciendo el codigo que se me olvido responderle el 27 jun. 2017 a las 15:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.