Tengo una lista muy larga de elementos, cada uno con una casilla de verificación que tiene 3 estados (Sí = marcado, No = X'd, No aplicable = sin marcar). Usando una casilla de verificación, pude alternar con 3 estados usando el elemento .indeterminate, de la siguiente manera:
function chkbx(cb) { if (cb.readOnly) cb.checked = cb.readOnly = false; else if (!cb.checked) cb.readOnly = cb.indeterminate = true; else if (cb.checked) cb.readOnly = cb.indeterminate = false; } function showtext() { if (cert27.checked) {document.getElementById('BoxB27').style.display = "block";} else {document.getElementById('BoxB27').style.display = "none";} if (!cert27.checked) {document.getElementById('BoxA27').style.display = "block";} else {document.getElementById('BoxA27').style.display = "none";} if (cert27.indeterminate) {document.getElementById('BoxC27').style.display = "block";} else {document.getElementById('BoxC27').style.display = "none";} if (cert28.checked) {document.getElementById('BoxB28').style.display = "block";} else {document.getElementById('BoxB28').style.display = "none";} if (!cert28.checked) {document.getElementById('BoxA28').style.display = "block";} else {document.getElementById('BoxA28').style.display = "none";} if (cert28.indeterminate) {document.getElementById('BoxC28').style.display = "block";} else {document.getElementById('BoxC28').style.display = "none";} } <body> <table> <tr> <td><input type="checkbox" id="cert27" value="25" onclick="showtext();chkbx(this);" /></td> <td>Banannas</td> </tr> <tr> <td><input type="checkbox" id="cert28" value="15" onclick="showtext();chkbx(this);" /></td> <td>Sugar</td> </tr> </table> <span id="BoxA27" style="display:none">Bananas excluded.</span> <span id="BoxB27" style="display:none">Bananas included.</span> <span id="BoxC27" style="display:none">Bananas are N/A.</span> <span id="BoxA28" style="display:none">Sugar excluded.</span> <span id="BoxB28" style="display:none">Sugar included.</span> <span id="BoxC28" style="display:none">Sugar is N/A.</span> </body>Sin embargo, al cambiar el estado de una casilla de verificación, no solo se estropea el texto que se muestra, sino que también cambia el texto de otras casillas y no muestra correctamente el estado de la casilla de verificación.
¿Cómo obtengo el estado correcto de cada casilla de verificación y muestro el texto correcto?
Cuando hace clic en una checkbox de verificación, primero debe llamar a chkbx() para actualizar su estado y luego llamar a showtext() .
Luego, para manejar el mensaje que se muestra para cada estado, debe usar if...else if...else porque !checkbox.checked y checkbox.indeterminate pueden ser true al mismo tiempo:
function chkbx(cb) { if (cb.readOnly) cb.checked = cb.readOnly = false; else if (!cb.checked) cb.readOnly = cb.indeterminate = true; else if (cb.checked) cb.readOnly = cb.indeterminate = false; } function showtext() { if(cert27.checked){ document.getElementById('BoxB27').style.display = "block"; document.getElementById('BoxA27').style.display = "none"; document.getElementById('BoxC27').style.display = "none"; } else if (cert27.indeterminate) { document.getElementById('BoxC27').style.display = "block"; document.getElementById('BoxA27').style.display = "none"; document.getElementById('BoxB27').style.display = "none"; } else { document.getElementById('BoxA27').style.display = "block"; document.getElementById('BoxB27').style.display = "none"; document.getElementById('BoxC27').style.display = "none"; } if(cert28.checked){ document.getElementById('BoxB28').style.display = "block"; document.getElementById('BoxA28').style.display = "none"; document.getElementById('BoxC28').style.display = "none"; } else if (cert28.indeterminate) { document.getElementById('BoxC28').style.display = "block"; document.getElementById('BoxA28').style.display = "none"; document.getElementById('BoxB28').style.display = "none"; } else { document.getElementById('BoxA28').style.display = "block"; document.getElementById('BoxB28').style.display = "none"; document.getElementById('BoxC28').style.display = "none"; } } <body> <table> <tr> <td><input type="checkbox" id="cert27" value="25" onclick="chkbx(this);showtext();" /></td> <td>Banannas</td> </tr> <tr> <td><input type="checkbox" id="cert28" value="15" onclick="chkbx(this);showtext();" /></td> <td>Sugar</td> </tr> </table> <span id="BoxA27" style="display:none">Bananas excluded.</span> <span id="BoxB27" style="display:none">Bananas included.</span> <span id="BoxC27" style="display:none">Bananas are N/A.</span> <span id="BoxA28" style="display:none">Sugar excluded.</span> <span id="BoxB28" style="display:none">Sugar included.</span> <span id="BoxC28" style="display:none">Sugar is N/A.</span> </body>