¿Son posibles estas 2 funciones usando javascript (haciendo clic en la casilla de verificación para habilitar y luego mostrar el texto, haciendo clic en para deshabilitar y luego no mostrar el texto)?
Al marcar una casilla de verificación y luego mostrar texto (opcionalmente editable). ¿Al desmarcar la misma casilla de verificación y eliminar el texto?
¿Tiene una serie de tales casillas de verificación y muestra (o deja de mostrar) cada línea de texto en el orden en que se enumeran las casillas de verificación? (por ejemplo, 1 línea a la vez en el orden de las casillas de verificación)
** EDIT - código hasta ahora, no funciona para otras opciones... también es posible editar todo el texto en 1 contenedor? ***
<!DOCTYPE html> <html> <body> <p>Text Maker:</p> <input type="checkbox" id="box" onclick="myFunction()"> <label for="box">Option 1</label> <input type="checkbox" id="box" onclick="myFunction()"> <label for="box">Option 2</label> <input type="checkbox" id="box" onclick="myFunction()"> <label for="box">Option 3</label> <p id="text" style="display:none">Display Option 1 settings here.</p> <p id="text" style="display:none">Display Option 2 settings here.</p> <p id="text" style="display:none">Display Option 3 settings here.</p> <script> function myFunction() { var checkBox = document.getElementById("box"); var text = document.getElementById("text"); if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } } </script> </body>Puede usar esta palabra clave al llamar a su función para hacer referencia a la casilla de verificación en la que se está haciendo clic, y también pasar la identificación de los párrafos para capturar ese elemento.
Puede agregar contenteditable="true" a sus etiquetas de párrafo para que sean editables, si lo entiendo correctamente.
<p>Text Maker:</p> <input type="checkbox" id="box1" onclick="myFunction(this,'textBox1')"> <label for="box1">Option 1</label> <input type="checkbox" id="box2" onclick="myFunction(this,'textBox2')"> <label for="box2">Option 2</label> <input type="checkbox" id="box3" onclick="myFunction(this,'textBox3')"> <label for="box3">Option 3</label> <p id="textBox1" style="display:none" contenteditable="true">Display Option 1 settings here.</p> <p id="textBox2" style="display:none">Display Option 2 settings here.</p> <p id="textBox3" style="display:none">Display Option 3 settings here.</p> <script> function myFunction(checkBoxElm,textBoxId) { let textBox = document.getElementById(textBoxId); if (checkBoxElm.checked){ textBox.style.display = "block"; } else { textBox.style.display = "none"; } } </script>Cuando tener múltiples entradas con el mismo nombre de clase de identidad funciona mejor. Entonces puede agregar un nombre de clase a las entradas y luego usar cada función para lograr lo que está tratando de hacer.
Las siguientes entradas tienen el mismo nombre de clase y ahora puede usar cada función de la siguiente manera:
`
$ = jQuery; $('.box').each(function(){ $(this).change(function() { // on change of any of the input either checked or unchecked if(this.checked){ // if the input is checked alert('checked'); // your css }else{ // if the input is unchecked alert('not checked'); // your css } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="box"> <label for="box">Option 1</label> <input type="checkbox" class="box"> <label for="box">Option 2</label> <input type="checkbox" class="box">