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 &nbsp;  
    </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/

0
JavaLearner1 10 dic. 2015 a las 09:09

5 respuestas

La mejor respuesta

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;
}
}
1
Nero 10 dic. 2015 a las 06:17

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 &nbsp;
    </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>
0
Rajeshkumar Natarajen 10 dic. 2015 a las 06:25

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 &nbsp;
            
        </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>
1
ngLover 10 dic. 2015 a las 06:28

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/

0
Ajay Makwana 10 dic. 2015 a las 06:28

Puedes usar este código a continuación

$("#ckbox3").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
0
Tanmay 10 dic. 2015 a las 06:23