个人中心
gpt4 book ai didi

javascript - 使用 javascript 取消选中复选框

转载 作者：行者123 更新时间：2023-12-03 02:50:18 24 4
gpt4 key购买 nike

我有一个主席/副主席复选框

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

它在最后一个总统复选框上运行良好，因为我特别编写的脚本 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>

最佳答案

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

你可以这样做:

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>

或者

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>

关于javascript - 使用 javascript 取消选中复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47897845/

24 4 0
文章推荐： javascript - 文本组件给定不同组件中的行数
文章推荐： javascript - Angularjs 路由解析
文章推荐： javascript - 通过外部按钮/链接进行数据表过滤
文章推荐： javascript - 如何在正则表达式中使用任何语言的任何字母
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com