for loop javascript inside if statement

Question

Is there a way to do !radios[0].checked && !radios[1].checked && !radios[2].checked in a loop and in the sometime keep the if condition as is? my code is :

 function afterLogin(event){ event.preventDefault(); if((!radios[0].checked && !radios[1].checked && !radios[2].checked) || userName.value === "" || numOfQuestions.value === ""){ skillMsg.innerHTML = "Please check one of the skills before login"; isTrue = false; }else{ title[0].innerHTML = "Welcome " + userName.value; loginForm.style.display = "none"; calForm.style.display = "block"; formsColor.style.backgroundColor = color.value; startTheGame(); isTrue = true; } }

and this what I tried to do :

 function afterLogin(event){ event.preventDefault(); for(let i = 0; i < radios.length; i++){ if(!radios[i].checked || userName.value === "" || numOfQuestions.value === ""){ //change the plase here skillMsg.innerHTML = "Please check one of the skills before login"; return false; }else{ title[0].innerHTML = "Welcome " + userName.value; loginForm.style.display = "none"; calForm.style.display = "block"; formsColor.style.backgroundColor = color.value; //return true; startTheGame(); //return true; } } }

Answer 1

Try this ? You can use the Array.every method available. For reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

function afterLogin(event){
    event.preventDefault(); 
    if((!radios.every(radio => radio.checked) || userName.value === "" || numOfQuestions.value === ""){
        skillMsg.innerHTML = "Please check one of the skills before login";
        isTrue = false;
    }else{
        title[0].innerHTML = "Welcome " + userName.value;
        loginForm.style.display = "none";
        calForm.style.display = "block";
        formsColor.style.backgroundColor  = color.value;
        startTheGame();
        isTrue = true;
    }
    
}

Answer 2

Yes, its possible, create a different validate function to do the sanity check, or do it in the same function itself

    function afterLogin(event){
        event.preventDefault(); 

        let notChecked = false;
        for(let i = 0; i < radios.length; i++){
            if(!radios[i].checked){
                notChecked = true;
                break;
            }
        }

        if(notChecked || userName.value === "" || numOfQuestions.value === ""){
            skillMsg.innerHTML = "Please check one of the skills before login";
            isTrue = false;
        }else{
            title[0].innerHTML = "Welcome " + userName.value;
            loginForm.style.display = "none";
            calForm.style.display = "block";
            formsColor.style.backgroundColor  = color.value;
            startTheGame();
            isTrue = true;
        }  
    }

Answer 3

Yes, you can use every() function to check this.

var radios = [{checked: false}, {checked: false}, {checked: false}, {checked: false}];
if(radios.every(checkValue) || userName.value === "" || numOfQuestions.value === "") {
// your code
}

function checkValue({checked}) {
  return checked === false;
}

Also try to use clean code principles. Like try using Fail first approach, use if and return so that you don't have to use else block there. Simply put the else part outside of if block.