至少有一个复选框必须保持选中取消选择其中一个的行动

Question

我有一个表单上的一些复选框，我想验证他们取消选择每一个。所以至少有一个复选框必须在取消选择事件时保持选中状态。

function validateCBox() { 
 
var checkBoxes = document.getElementsByClassName('myCBox'); 
 
var isChecked = false; 
 
    for (var i = 0; i < checkBoxes.length; i++) { 
 
     if (checkBoxes[i].checked) { 
 
      isChecked = true; 
 
     }; 
 
    }; 
 
    if (isChecked) { 
 
     alert('checked!'); 
 
     } else { 
 
      alert('please check at least one checkbox!'); 
 
     } 
 
}

<form> 
 
    <input type = "checkbox" class='myCBox' value = "a">1 
 
    <input type = "checkbox" class='myCBox' value = "b">2 
 
    <input type = "checkbox" class='myCBox' value = "c">3 
 
    <input type = "checkbox" class='myCBox' value = "d">4 
 
</form> 
 
<input type = "button" value = "Edit and Report" onClick="validateCBox()">

Answer 1

在你的榜样，你需要注册一个click事件监听来电validateCBox()只要单击一个复选框。

使用click EventListener的原因是因为您可以使用event.preventDefault()取消事件。

var checkBoxes = document.getElementsByClassName('myCBox'); 
 

 
for (var i = 0; i < checkBoxes.length; i++) { 
 
    checkBoxes[i].addEventListener('click', function(event) { 
 
     validateCBox(event); 
 
    }); 
 
} 
 

 
function validateCBox(event) { 
 
    var isChecked = false; 
 
     
 
    for (var i = 0; i < checkBoxes.length; i++) { 
 
     if (checkBoxes[i].checked) { 
 
      isChecked = true; 
 
     } 
 
    } 
 
    
 
    if (isChecked) { 
 
     alert('checked!'); 
 
    } else { 
 
     alert('please check at least one checkbox!'); 
 
     event.preventDefault(); 
 
    } 
 
}

<form> 
 
    <input type = "checkbox" class='myCBox' value = "a">1 
 
    <input type = "checkbox" class='myCBox' value = "b">2 
 
    <input type = "checkbox" class='myCBox' value = "c">3 
 
    <input type = "checkbox" class='myCBox' value = "d">4 
 
</form> 
 
<input type = "button" value = "Edit and Report" onClick="validateCBox()">