Tengo íconos de menú donde necesito hacer que se comporten como casillas de verificación (activar o desactivar) Entonces, cuando se hace clic en el ícono de ajuste, debe ajustar el texto y mostrar el cambio de color que está activado y cuando se vuelve a hacer clic, se apaga
Entonces puedo deshacerme de la casilla de verificación tradicional
tengo codigo como
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@38,200,0,0" /> <style> .menu{ width:1000%;height:25px; } .input:focus{ width:1000%; height:100%; outline: none !important; border:1px solid #1a73e8; box-shadow: 0 0 10px #719ECE; } .input{ width:1000%; height:100%; outline: none !important; border:1px solid #c0c0c0; box-shadow: 0 0 1px #719ECE; } </style> <body style="margin:2px;"> <div class="menu"> <input type="checkbox" id="wrap" name="wrap" value="Wrap" style="vertical-align: middle;"> <label for="wrap"> Wrap text</label> <span class="material-symbols-outlined">wrap_text</span> <span class="material-symbols-outlined">undo</span> <span class="material-symbols-outlined">redo</span> <span class="material-symbols-outlined">save</span> </div> <textarea wrap="hard" class="input"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </textarea> <script> $("#wrap").change(function() { if(this.checked) { $(".input").css("width", "100%"); } else { $(".input").css("width", "1000%"); } }); </script> </body>Puede agregar un detector de eventos para los íconos en lugar de usar la casilla de verificación como selector.
<span class="material-symbols-outlined" id="wrapText">wrap_text</span> let wrapText = $("#wrapText"); wrapText.on("click", function () { $(".input").css("width", "100%"); });