Tengo una casilla de verificación, cuando hago clic en una casilla de verificación (ckbox3), se muestran 3 opciones con casillas de verificación (check1, check2, check3). Cuando desactivo ckbox3, quiero que check1, check2 y check3 estén desmarcados. No estoy seguro de cómo hacer esto
¿Alguien puede ayudarme con el código Javascript? (Necesito una solución con Javascript)
HTML :
<div id="divv1">
<input type="checkbox" id="ckbox3" >Checkbox1
</div>
<br>
<div id="divv2">
<input type="checkbox" name="check1" onclick="calculate()" id="check1">check 1
<input type="checkbox" name="check2" onclick="calculate()" id="check2">check 2
<input type="checkbox" name="check3" onclick="calculate()" id="check3">check 3
</div>
JavaScript :
document.getElementById('ckbox3').onclick = function() {
if(ckbox3.checked){
toggleSub(this, 'divv2');
} else {
toggleSub(this, 'divv2');
}
};
function toggleSub(box,id)
{
var el = document.getElementById(id);
if ( box.checked ) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
CSS :
#divv2
{
display: none;
margin-left: 75px;
font-family: 'PT Sans', sans-serif;
}
JSFiddle: http://jsfiddle.net/vikrams/hLmneafj/1/
5 respuestas
Agregue una función onchange en ckbox3:
<input type="checkbox" id="ckbox3" onchange = "change()" >
Y en función:
function change()
{
if(document.getElementById("ckbox3").checked == false){
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = false;
document.getElementById("check3").checked = false;
}
}
Por favor, mire el siguiente código:
<script>
function handleClick(element){
if (element.checked == true){
document.getElementById("check1").checked = true;
document.getElementById("check2").checked = true;
document.getElementById("check3").checked = true;
}else{
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = false;
document.getElementById("check3").checked = false;
}
}
</script>
<div id="divv1">
<input type="checkbox" id="masterCheckbox" onclick='handleClick(this);'> Checkbox1
</div>
<br>
<div id="divv2">
<input type="checkbox" name="check1" onclick="calculate()" id="check1">check 1
<input type="checkbox" name="check2" onclick="calculate()" id="check2">check 2
<input type="checkbox" name="check3" onclick="calculate()" id="check3">check 3
</div>
Aquí está el código generic
que puede asignar cualquier número de casillas de verificación dentro de div
.
document.getElementById('ckbox3').onclick = function() {
if(ckbox3.checked)
{
toggleSub(this,true);
}
else
{
toggleSub(this, false);
}
};
function toggleSub(box,status)
{
var div = document.getElementById("divv2");
var el = div.getElementsByTagName("input");
var len = el.length;
while(len--)
{
div.getElementsByTagName("input")[len].checked = status;
}
}
<div id="divv1">
<input type="checkbox" id="ckbox3" >Checkbox1
</div>
<br>
<div id="divv2">
<input type="checkbox" name="check1" onclick="calculate()" id="check1">check 1
<input type="checkbox" name="check2" onclick="calculate()" id="check2">check 2
<input type="checkbox" name="check3" onclick="calculate()" id="check3">check 3
</div>
Prueba esto en tu otra parte:
else
{
el.style.display = 'none';
var checks = document.querySelectorAll('#' + id + ' input[type="checkbox"]');
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
check.checked = false;
}
}
}
Ver http://jsfiddle.net/hLmneafj/4/
Puedes usar este código a continuación
$("#ckbox3").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas relacionadas con la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excluyendo ActionScript). Esta etiqueta rara vez se usa sola, pero a menudo se asocia con las etiquetas [node.js], [json] y [html].