CODEWITHSUNDEEP
javascriptcheckbox
YMA981
YMA981

Reputation: 121

unchecking checkboxes using javascript

I have a president/vice president checkbox

I wrote a script to uncheck appropriate vice president and all presidents after the user checks a president since only 1 president is allowed and a vice president can't be a president.

it is functioning good at the last president checkbox since the script i wrote especially else if(president[p].checked==false){ is enabling the checkboxes after it disables them. but i don't know why it is going inside the else statement.

In Summary:

If a president is checked -> disable all other presidents and the appropriate vice president.

if president unchecked - enable back all presidents and appropriate vice president

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    President <input type="checkbox" value="president"><br>
    Vice President <input type="checkbox" value="vicePresident"><br><br>
    President <input type="checkbox" value="president"><br>
    Vice President <input type="checkbox" value="vicePresident"><br><br>
    President <input type="checkbox" value="president"><br>
    Vice President <input type="checkbox" value="vicePresident"><br><br>
    President <input type="checkbox" value="president"><br>
    Vice President <input type="checkbox" value="vicePresident"><br>


    <script>
        var president = document.querySelectorAll('input[type="checkbox"][value="president"]');
        var vicePresident = document.querySelectorAll('input[type="checkbox"][value="vicePresident"]');
        
        function change(){
            var presidentChecked;
            for (var p=0;p<president.length;p++){
                if (president[p].checked==true){
                    presidentChecked=p;
                    vicePresident[p].disabled =true;           // disable vice president of checked president
                    
                    for (var p1 =0; p1<president.length;p1++){ // disable all unchecked presidents 
                        if(p1 != p){
                            president[p1].disabled = true;                           
                        }
                    }    
                } 
                else if(president[p].checked==false){
                    vicePresident[p].disabled =false;
                    console.log("inside uncheck");
                    for(var uncheck =0; uncheck<president.length;uncheck++){
                        president[uncheck].disabled = false;
                    }
                }
            }








                // else { //if (president[p].checked==false){
                //     //presidentChecked=p;
                //     vicePresident[p].disabled =false;
                //     for (var v =0; v<president.length;v++){
                //         president[v].disabled = false;                            
                //     }
                // }    
            //}
            
            
            // for (v = 0; v<vicePresident.length; v++){   
            //     if (vicePresident[v].checked ==true){
            //         if(v != p){
            //                 vicePresident[v].disabled = true;                            
            //             }
            //         }
            //         else if (vicePresident[p].checked == false){
            //         for (v = 0; v<vicePresident.length; v++){
            //             if(presidentChecked){
            //                 vicePresident[v].disabled = true;                            
            //             } else { vicePresident[v].disabled =false; }
            //         }    
            //     }
            // } 
        
        }
        
        
        for(var i = 0; i< president.length; i++){ // add an Event Listener to all the checkboxes
            president[i].addEventListener('change', change);
            vicePresident[i].addEventListener('change', change);
        }

    </script>
    
</body>
</html>

Upvotes: 0

Views: 140

Answers (2)

H77
H77

Reputation: 5967

Since you're looping through all president checkboxes it will enable back the checkboxes when the item in the loop is unchecked, which is why it goes into the else part.

You could instead do something like this:

var presidents = document.querySelectorAll('input[type="checkbox"][value="president"]');
var vicePresidents = document.querySelectorAll('input[type="checkbox"][value="vicePresident"]');

function isChecked(chkList) {
  for (var i = 0; i < chkList.length; i++) {
    if (chkList[i].checked)
      return true;
  }
  return false;
}

function presidentChange() {
  handleChecks(this.checked, isChecked(vicePresidents));
}

function vicePresidentChange() {
  handleChecks(isChecked(presidents), this.checked);
}

function handleChecks(presidentChecked, vicePresidentChecked) {
  presidents.forEach(function(president, i) {
    president.disabled = !president.checked && (presidentChecked || vicePresidents[i].checked);
    vicePresidents[i].disabled = !vicePresidents[i].checked && (vicePresidentChecked || president.checked);
  });
}

for (var i = 0; i < presidents.length; i++) { // add an Event Listener to all the check boxes
  presidents[i].addEventListener('change', presidentChange);
  vicePresidents[i].addEventListener('change', vicePresidentChange);
}
President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br><br> President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br><br> President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br><br> President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br>

Or

var presidents = document.querySelectorAll('input[type="checkbox"][value="president"]');
var vicePresidents = document.querySelectorAll('input[type="checkbox"][value="vicePresident"]');

function checkTheBoxes(checkBox, chkList, otherChkList) {
  var otherCheckBox;
  var otherChecked = false;
  chkList.forEach(function(p, i) {
    if (!p.checked)
      p.disabled = checkBox.checked || otherChkList[i].checked;
    else
      otherChkList[i].disabled = true;
      
    if (p === checkBox)
      otherCheckBox = otherChkList[i];
      
    otherChecked = otherChecked || otherChkList[i].checked;
  });
  
  otherCheckBox.disabled = otherChecked || checkBox.checked;
}

function presidentChange() {
  checkTheBoxes(this, presidents, vicePresidents);
}

function vicePresidentChange() {
  checkTheBoxes(this, vicePresidents, presidents);
}

for (var i = 0; i < presidents.length; i++) { // add an Event Listener to all the check boxes
  presidents[i].addEventListener('change', presidentChange);
  vicePresidents[i].addEventListener('change', vicePresidentChange);
}
President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br><br> President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br><br> President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br><br> President <input type="checkbox" value="president">
<br> Vice President <input type="checkbox" value="vicePresident">
<br>

Upvotes: 1

combatc2
combatc2

Reputation: 1263

Here's one solution - https://jsfiddle.net/71ajqykw/

President <input type="checkbox" value="president" class="p one"><br>
Vice President <input type="checkbox" value="vicePresident" class="v one"><br><br>
President <input type="checkbox" value="president" class="p two"><br>
Vice President <input type="checkbox" value="vicePresident" class="v two"><br><br>
President <input type="checkbox" value="president" class="p three"><br>
Vice President <input type="checkbox" value="vicePresident" class="v three"><br><br>
President <input type="checkbox" value="president" class="p four"><br>
Vice President <input type="checkbox" value="vicePresident" class="v four"><br>


document.addEventListener("click", function(evt) {
    if (evt.target.className.startsWith("p")) {
        var checked = evt.target.checked;
        var vpresident = document.getElementsByClassName("v " + evt.target.className.split(" ")[1])[0];

        vpresident.checked = checked;
        vpresident.disabled = checked;

        var presidents = document.getElementsByClassName("p");
        for (var i = 0; i < presidents.length; i++) {
            if (evt.target !== presidents[i]) {
                presidents[i].checked = false;
                presidents[i].disabled = checked;
            }
        }

        var vpresidents = document.getElementsByClassName("v");
        for (var i = 0; i < vpresidents.length; i++) {
            if (vpresident !== vpresidents[i]) {
                vpresidents[i].checked = false;
                vpresidents[i].disabled = checked;
            }
        }
    }
});

Upvotes: 0

Related Questions