Javascript дисплей остальные формы, если нет галочки не тикали, скрыть, если 1 или 2 из них

Question

function showHide() { 
 
    var div = document.getElementById("hidden_div"); 
 
    if (div.style.display == 'none') { 
 
    div.style.display = ''; 
 
    } else { 
 
    div.style.display = 'none'; 
 
    } 
 
}

<form method="post" name="installer" onsubmit="showHide(); return false;"> 
 

 
    <label>Home Keyword</label> 
 
    <br />Are you looking to live here? 
 
    <input id="checkbox" type="checkbox"> 
 
    <br />Are you looking to rent? 
 
    <input id="checkbox" type="checkbox"> 
 
    <br /> 
 

 
    <input type="submit" value="Continue" name="submit" onsubmit="showHide()"> 
 

 
</form> 
 

 
<div id="hidden_div" style="display:none"> 
 
    <p>Show rest of the form here when the above form is submitted with no checkboxes ticked</p> 
 
</div> 
 

 

 
<div id="sorry_div" style="display:none"> 
 
    <p>Sorry, we can't continue with your application.</p> 
 
</div>

Я пытаюсь получить остальную часть моей формы для отображения, если обе галочки остались пустыми (после кнопки submit/continue). Однако на данный момент он показывает независимо от того, сколько из них отмечено.

После этого, если оба отмечены галочкой, как я могу сделать следующее сообщение: «Извините, мы не можем продолжить или что-то подобное?

Это относительно легко сделать или довольно сложно?

У меня есть следующий HTML:

<form method="post" name="installer" onsubmit="showHide(); return false;"> 

    <label>Home Keyword</label> 
    <br /> 

    Are you looking to live here? <input id="checkbox" type="checkbox"><br /> 
    Are you looking to rent? <input id="checkbox" type="checkbox"><br /> 

    <input type="submit" value="Continue" name="submit" onsubmit="showHide()"> 

</form> 

<div id="hidden_div" style="display:none"> 
    <p>Show rest of the form here when the above form is submitted with no checkboxes ticked </p> 
</div> 


<div id="sorry_div" style="display:none"> 
    <p>Sorry, we can't continue with your application.</p> 
</div> 

JS:

function showHide() { 
    var div = document.getElementById("hidden_div"); 
    if (div.style.display == 'none') { 
     div.style.display = ''; 
    } 
    else { 
     div.style.display = 'none'; 
    } 
} 

Answer 1

Прежде всего, вы не должны использовать идентификатор более одного раза; это плохая практика. во-вторых, используйте свойство .checked, чтобы получить проверенное состояние checkbox, затем используйте логический оператор И (&&); чтобы проверить, не отмечены ли как первый, так и второй флажки.

Редактировать: обновленный код для включения #sorry_div.

function showHide() { 
 
    var hiddenDiv = document.getElementById("hidden_div"); 
 
    var sorryDiv = document.getElementById("sorry_div"); 
 
    var firstCheckBox = document.getElementById("first-checkbox").checked; 
 
    var secondCheckBox = document.getElementById("second-checkbox").checked; 
 
    if (firstCheckBox != 1 && secondCheckBox != 1) { 
 
     hiddenDiv.style.display = ''; 
 
     sorryDiv.style.display = 'none'; 
 
    } else { 
 
     hiddenDiv.style.display = 'none'; 
 
     sorryDiv.style.display = ''; 
 
    } 
 
}

<form method="post" name="installer" onsubmit="showHide(); return false;"> 
 

 
    <label>Home Keyword</label> 
 
    <br />Are you looking to live here? 
 
    <input id="first-checkbox" type="checkbox"> 
 
    <br />Are you looking to rent? 
 
    <input id="second-checkbox" type="checkbox"> 
 
    <br /> 
 

 
    <input type="submit" value="Continue" name="submit" onsubmit="showHide()"> 
 

 
</form> 
 

 
<div id="hidden_div" style="display:none"> 
 
    <p>Show rest of the form here when the above form is submitted with no checkboxes ticked</p> 
 
</div> 
 

 

 
<div id="sorry_div" style="display:none"> 
 
    <p>Sorry, we can't continue with your application.</p> 
 
</div>