Quiero mostrar y ocultar las opciones dentro de la principal según la casilla de verificación marcada o no. Tengo muchas casillas de verificación, pero aquí estoy marcando la casilla de dirección.
Esta es mi casilla de verificación
<input type="checkbox" id="address">Mark itaquí está el div que quiero ocultar/mostrar
<div id="options"> //div </div> if($('#address').prop('checked')){ $('#options').show() }else{ $('#options').hide() }El código anterior no funciona para mí.
Su código solo funcionará la first time no cada vez que cambie el valor de la casilla de verificación.
Debe agregar un event listener al cambiar el valor checked de la casilla de verificación
$("#address").on("change", e => { const isChecked = e.target.checked; if (isChecked) $('#options').show() else $('#options').hide() }) if ($('#address').prop('checked')) { $('#options').show() } else { $('#options').hide() } $("#address").on("change", e => { const isChecked = e.target.checked; if (isChecked) $('#options').show() else $('#options').hide() }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" id="address">Mark it <div id="options"> //div </div>La razón por la que su código no funciona, solo marca la casilla de verificación de condición o no, tiene que llamar al evento de cambio de casilla de verificación también cada vez que se hace clic en la casilla de verificación. aquí hay una demostración que funciona, espero que lo ayude a comprender cómo funciona jquery.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $('#options').hide(); $('#address').change(function () { if ($('#address').prop('checked')) { $('#options').show() } else { $('#options').hide() } }); }); </script> </head> <body> <div id="options"> //div </div> <input type="checkbox" id="address">Mark it </body> </html>