I have two check boxes that behave like radio buttons. Below is the code:
<form>
<input type="checkbox" id="FirstBox" onclick="clickMe(this)" />Is this the first time, you are visiting this web site.
<input type="checkbox" name="test" id="SecondBox" onclick="interest(this) />Yes
<input type="checkbox" id="ThirdBox" name="test" onclick="interest(this) />No
<button type="submit">Submit</button>
</form>
If the checkBox with id firstbox is clicked then user is required to click on either SecondBox or ThirdBox. SecondBox and ThirdBox
are behaving like a radio button with below code:
function interest(checkbox){
var checkboxes = document.getElementsByName('test')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
}
I want a required message to display when the user does not click on either Second or third checkbox. Below is what I tried to write:
function clickMe(fb)
{
var sb = document.getElementById("SecondBox");
var tb = document.getElementById("ThirdBox");
if(fb.checked == true{
if (sb.checked == false && tb.ariaChecked == false)
{
Message saying that one of the check box is required right under the checkboxes.
}
}
}
below is the screenshot:
any help will be appreciated.