unchecking checkboxes using javascript

Question

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>

I don't understand what your question is, what you're trying to do, or what the problem is you're having. — j08691
– j08691, Commented Dec 20, 2017 at 2:18
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 — YMA981
– YMA981, Commented Dec 20, 2017 at 2:21
I understand the requirements of the question, but I'm confused about your user-interface/user experience; if there is only one VP listed per president (I'm assuming this isn't a multiple-choice quiz) why does the user need to select the VP? And if you only want one president selected, why are you using check-boxes and not radio buttons? It may, assuming this isn't an over-simplified example, be worth asking for help over at User Experience, (but check their help pages first). — David Thomas
– David Thomas, Commented Dec 20, 2017 at 13:38
you are totally right, i didn't include all the logic behind the question. It is a form that the client can repeat. i didn't use radio btn because there are multiple choices a user can choose not only president and VP — YMA981
– YMA981, Commented Dec 20, 2017 at 19:20

H77 · Accepted Answer · 2017-12-20 04:59:29Z

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>

function vicePresidentChange(){ var vicePresidentChecked = this.checked; vicePresidents.forEach(function(vicePresident, index){ if(!vicePresident.checked) vicePresident.disabled = vicePresidentChecked; }); } Thank you it is working. i added the vicePresidentChange() but when i uncheck a president it enables all vicePresidents even when the user checked a vicePresident (All vp should remain disabled )\
So only one 1 vice president is allowed, just like president?

combatc2 · Accepted Answer · 2017-12-20 03:05:45Z

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

Collectives™ on Stack Overflow

unchecking checkboxes using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related