making a check box required on a click of another checkbox

Question

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 on the web page 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.

Answer 1

This is a basic JavaScript programming question not ASP.NET Core. The example code below assumes the intent is to stop the submit and display a message. Keep in mind, the same logic must exist in the controller in case the user turned off JavaScript. The controller code is left for you to write.

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>
<div class="row">
    <div class="col-md-4">
        <form id="form">
            <input type="checkbox" id="FirstBox" />Is this the first time, you are visiting this web site.<br />
            <input type="checkbox" name="test" id="SecondBox" onclick="interest(this)" />Yes<br />
            <input type="checkbox" id="ThirdBox" name="test" onclick="interest(this)" />No<br />
            <div id="message">
            </div>
            <button type="submit">Submit</button>

        </form>
    </div>
</div>

@section scripts {
    <script>
        const form = document.getElementById("form");
        form.addEventListener("submit", validateCheckboxes);

        function validateCheckboxes(event) {
            //event.preventDefault();

            var fb = document.getElementById("FirstBox");
            var sb = document.getElementById("SecondBox");
            var tb = document.getElementById("ThirdBox");

            //console.log(fb.checked);
            //console.log(sb.checked);
            //console.log(tb.checked);

            if (!(fb.checked & (sb.checked | tb.checked))){
                event.preventDefault();
                document.getElementById("message").innerText = "Message saying that one of the check box is required right under the checkboxes."
            }
        }

        function interest(checkbox) {

            var checkboxes = document.getElementsByName('test')
            checkboxes.forEach((item) => {
                if (item !== checkbox) item.checked = false
            })

        }
        
    </script>
}

      

In my opinion, the flow makes little sense. One checkbox with "Is this the first time you visited the site" will give the same results as the three checkboxes.

If the selection is required then use radio buttons and a standard [Required] attribute on the associated model property. If you follow MVC/Razor Page standard patterns then writing custom JavaScript is not required in this case.