I have two check boxes that behave like radio buttons.
I am not using asp.net web forms. I am using .net core with Razor pages.
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.
}
}
}
any help will be appreciated.
