Desmarca una casilla de verificación, desmarca todas las demás casillas de verificación No funciona

Question

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/

javascript html checkbox

0

JavaLearner1 10 dic. 2015 a las 09:09

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Desmarca una casilla de verificación, desmarca todas las demás casillas de verificación No funciona

5 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript