CODEWITHSUNDEEP
javascripthtmlcheckbox
JavaLearner1
JavaLearner1

Reputation: 627

Uncheck one checkbox, unchecks all other checkboxes Not Working

I have a checkbox, when i click one checkbox (ckbox3), 3 options with checkboxes are shown(check1, check2, check3). When i uncheck ckbox3, i want check1, check2 and check3 to be unchecked. I am not sure how to do this

Can someone help me out with Javascript code.. (I need solution with 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/

Upvotes: 0

Views: 988

Answers (6)

ngLover
ngLover

Reputation: 4578

Here is the generic code you can give any number of check boxes inside 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>

Upvotes: 1

Ajay Makwana
Ajay Makwana

Reputation: 2372

try this in your else part :

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;
        }
    }
}

see http://jsfiddle.net/hLmneafj/4/

Upvotes: 0

Rajeshkumar Natarajen
Rajeshkumar Natarajen

Reputation: 41

Please have look on following code:

<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>

Upvotes: 0

Tanmay
Tanmay

Reputation: 590

You can use this code below

$("#ckbox3").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

This is how I would do it:

var arr = document.querySelectorAll("[id*='check']");
for(var i=0; i< arr.length; i++){
   arr[i].checked=false;
}

Here is your updated JSFiddle

Add the above code in the else section of your code to uncheck the rest when ckbox3 is unchecked, as shown in the JSFiddle demo.

Upvotes: 0

Nero
Nero

Reputation: 265

Add a onchange fuction on ckbox3 :

<input type="checkbox" id="ckbox3" onchange = "change()" >

and in fuction:

function change()
{
if(document.getElementById("ckbox3").checked == false){
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = false;
document.getElementById("check3").checked = false;
}
}

Upvotes: 1

Related Questions