function togchq3chn(x) { for (i = 1; i < 10; i++) { var k = "kd" + i; var c = "cd" + i; if (x.id == k) { document.getElementById(c).style.display = "block"; } } } .chqsqr { width: 25px; height: 25px; border: 1px solid rgb(180, 180, 180); border-radius: 2px; } .shcursor { cursor: pointer; } .inlineblock { display: inline-block !important; } .bluefont { color: rgb(0, 98, 167) !important; } .f17 { font-size: 1.7em !important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" /> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="col-md-1"> <div class="chqsqr shcursor inlineblock" id="kd1" onclick="togchq3chn(this)"> <i class="fas fa-check" id="cd1" style="position: relative; display:none; top:-2px; left: 2px; "></i> </div> </div> <div class="col-md-1"> <div class="chqsqr shcursor inlineblock" id="kd2" onclick="togchq3chn(this)"> <i class="fas fa-check" id="cd2" style="position: relative; display:none; top:-2px; left: 2px; "></i> </div> </div> <div class="col-md-1"> <div class="chqsqr shcursor inlineblock" id="kd3" onclick="togchq3chn(this)"> <i class="fas fa-check" id="cd3" style="position: relative; display:none; top:-2px; left: 2px; "></i> </div> </div> </body> </html>Una vez que hago clic en la casilla de verificación, se selecciona, pero si vuelvo a hacer clic en la misma casilla de verificación, la marca de sí no se desactiva.
Intento esa otra sección else{document.getElementById(c).style.display = "none";} pero cuando hago este código. en el momento en que una casilla de verificación puedo ser seleccionada. esto funcionará como un alternado.
Requisito: en la casilla de verificación, si vuelvo a hacer clic en la casilla de verificación Sí, aparecerá la casilla de verificación correspondiente.
Si entendí tu pregunta, ¿entonces querías algo como esto?
function clickFunction(prop){ var nameProp = document.getElementsByName(prop.name); var idProp = document.getElementById(prop.id); if (idProp.checked) { for(var i=0; i < nameProp.length; i++){ nameProp[i].disabled = false; } } } <tr><td><input type="checkbox" name="box" id="box1" value="1" tabIndex="1" onClick="clickFunction(this)">Test 1</td></tr> <tr><td><input type="checkbox" name="box" id="box2" value="1" tabIndex="1" onClick="clickFunction(this)">Test 2</td></tr> <tr><td><input type="checkbox" name="box" id="box3" value="1" tabIndex="1" onClick="clickFunction(this)">Test 3</td></tr>No necesita dar una ID única a cada <div> y a cada <i> . No necesita repetir 10 veces al hacer clic, generar ID, probar si cada ID coincide con el elemento en el que hizo clic y luego mostrar/ocultar otro elemento con una ID compuesta.
Lo que está tratando de hacer se puede hacer con un simple toggle() al hacer clic. (¡Y un jQuery!)
$(".chqsqr").click(function() { $(this).find("i").toggle() }); .chqsqr { width: 25px; height: 25px; border: 1px solid rgb(180, 180, 180); border-radius: 2px; } .shcursor { cursor: pointer; } .inlineblock { display: inline-block !important; } .bluefont { color: rgb(0, 98, 167) !important; } .f17 { font-size: 1.7em !important; } i.fas { position: relative; display: none; top: -2px; left: 2px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" /> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="col-md-1"> <div class="chqsqr shcursor inlineblock"> <i class="fas fa-check"></i> </div> </div> <div class="col-md-1"> <div class="chqsqr shcursor inlineblock"> <i class="fas fa-check"></i> </div> </div> <div class="col-md-1"> <div class="chqsqr shcursor inlineblock" id="kd3"> <i class="fas fa-check" ></i> </div> </div>