Estoy usando Bootstrap 5 y jQuery 3.6.0 y he estado tratando de encontrar una solución, pero todo lo que he encontrado no ha funcionado porque está muy desactualizado.
Básicamente, todo lo que intento hacer es tener un controlador de eventos para que la casilla de verificación esté marcada o desmarcada. La casilla de verificación es una casilla de verificación de estilo de interruptor de Bootstrap.
Me las arreglé para que el código de la parte no marcada se active, sin embargo, no creo que se esté activando correctamente. Pero no puedo conseguir que ese evento se active al comprobarlo.
Mi HTML:
<div class="form-check form-switch" id="checkboxLondon"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">London</label> </div>Mi jQuery/JS:
$('#checkboxLondon').click(function () { console.log("This works") if ($(this).is(":checked")){ console.log("Checkbox is checked"); } else if ($(this).is(":checked") == false) { console.log("Checkbox is unchecked"); } });Use el controlador de estado .change() EN su casilla de verificación, NO en el div principal, luego verifique cuando la casilla de verificación esté marcada con .is()
$('#flexSwitchCheckDefault').change(function(){ console.log($(this).is(':checked')) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-check form-switch" id="checkboxLondon"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">London</label> </div>