JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<form id="form1">
    <input type="checkbox" name="my_checkbox" checked="checked" value="some text"/>1
    <input type="checkbox" name="my_checkbox" value="some different text"/>2
    <input id="input1" name="input1" />
    <input id="input2" name="input2" />
    <input type="submit" />
</form>

JavaScript

window.onload = function () {
    var form1 = document.getElementById("form1"); // assuming <form id="form1"
    form1.onsubmit = function () {
        if (this.my_checkbox[0].checked && this.input1.value == "") {
            alert("Please enter something in input 1");
            this.input1.focus();
            return false;
        }
        if (this.my_checkbox[1].checked && this.input2.value == "") {
            alert("Please enter something in input 2");
            this.input2.focus();
            return false;
        }
        return true; // allow submission
    }
    // if the checkboxes had different IDs this could have been one function
    form1.my_checkbox[0].onclick = function () {
        this.form.my_checkbox[1].checked = !this.checked;
    }
    form1.my_checkbox[1].onclick = function () {
        this.form.my_checkbox[0].checked = !this.checked;
    }
}