Question

我有一位总统/副总统复选框

我写了一个脚本，在用户检查总统后取消选中相应的副总统和所有总统，因为只允许一位总统，副总统不能当总统。

它在最后一个总统复选框上运行良好，因为我写的脚本特别是else if(president[p].checked==false){在禁用它们后启用了复选框。但我不知道为什么它会进入else语句。

摘要：

如果检查总统 - >禁用所有其他总统和相应的副总统。

如果总统不加制止 - 让所有总统和适当的副总统都能回来

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

Answer 1

由于您通过所有总统复选框循环，因此当循环中的项目未选中时，它将启用复选框，这就是它进入else部分的原因。

你可以这样做：

＆＃13;

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

＆＃13;

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>

＆＃13;

或者

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 2

这是一个解决方案 - 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;
            }
        }
    }
});

使用javascript

2 个答案: