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>