Nrthugu

In html, I have four checkboxes 1,2,3,4. I want to select 1 and 2 at a time, when I select 3, 1 should be cleared automatic, When I select 4, 2 should be cleared (now 3 and 4 are selected, 1 and 2 are not), also I should not select 1 and 3, 1 and 4, 2 and 4, vice versa, only consecutive numbered checkboxes i.e 1 and 2, 2 and 3, 3 and 4, **but not 1 and

edit-1

Javascript

function callme() {

            var cbcb1 = document.getElementById("cb1");

            var cbcb2 = document.getElementById("cb2");

            var cbcb3 = document.getElementById("cb3");

            var cbcb4 = document.getElementById("cb4");

            if(cbcb1.checked && cbcb2.checked){

                if(cbcb3.checked)

                    cbcb1.checked = false;

                if(cbcb4.checked)

                    cbcb4.checked = false;

            }

            if(cbcb2.checked && cbcb3.checked){

                if(cbcb4.checked)

                    cbcb2.checked = false;

                if(cbcb1.checked)

                    cbcb3.checked = false;

            }

            if(cbcb3.checked && cbcb4.checked){

                if(cbcb2.checked)

                    cbcb4.checked = false;

                if(cbcb1.checked)

                    cbcb1.checked = false;

            }

        }

edit 2:

cb1 = id of checkbox 1

cb2 = id of checkbox 2

cb3 = id of checkbox 3

cb4 = id of checkbox 4

My Logic: The above javascript code works when selected 1 & 2, if 3 selected, 1 is unchecked, and now if 4 selected, 2 is unchecked. But now if I select 2 (when 3 and 4 are selected), 2 is not selected, I have to uncheck 4, then select 2.

Did you want something like this?

window.onload = ()=>{

  let checks = document.querySelectorAll('input[type=checkbox]');

  checks[0].addEventListener('change', function(){

    if(this.checked){

      checks[2].checked = false;

      checks[3].checked = false;

    }

  });

  checks[1].addEventListener('change', function(){

    if(this.checked){

      checks[3].checked = false;

    }

  });

  checks[2].addEventListener('change', function(){

    if(this.checked){

      checks[0].checked = false;

    }

  });

  checks[3].addEventListener('change', function(){

    if(this.checked){

      checks[0].checked = false;

      checks[1].checked = false;      

    }

  });    

}

<input type="checkbox" class="checks" id="check1">

<label for="check1">Check 1</label>

<input type="checkbox" class="checks" id="check2">

<label for="check2">Check 2</label>

<input type="checkbox" class="checks" id="check3">

<label for="check3">Check 3</label>

<input type="checkbox" class="checks" id="check4">

<label for="check4">Check 4</label>

Here's a working example.

On the other hand, I'm pretty sure there's a better way to do it (using loops). I've came up with one. But, I haven't been able to figure out the last case (1&4)

window.onload = ()=>{

  let checks = document.querySelectorAll('input[type=checkbox]');  

  for(let i = 0; i < checks.length; i++){

    if(i <= 1){

      checks[i].addEventListener('change', function(){

        if(this.checked){

          checks[i+2].checked = false;

        }

      });

    }

    else if(i >= 2 && i <= 3){

      checks[i].addEventListener('change', function(){

        if(this.checked){

          checks[i-2].checked = false;

        }

      });

    }    

  }

}

<input type="checkbox" class="checks" id="check1">

<label for="check1">Check 1</label>

<input type="checkbox" class="checks" id="check2">

<label for="check2">Check 2</label>

<input type="checkbox" class="checks" id="check3">

<label for="check3">Check 3</label>

<input type="checkbox" class="checks" id="check4">

<label for="check4">Check 4</label>