validate before submit and check if 1 of 2 check boxes per group is checked?

Question

I have 8 check boxes, split into groups of 2. in the first group, i have one checkbox labeled checkbox1 and one labeled checkbox2.

I want a javascript code that will allow me to be able to check on the form submit whether at least one of 2 of these checkboxes has been checked for each group.

The check boxes are yes and no values so only one per group can be checked.

I do not want a script that simply checks to see if you have checked only one checkbox as this will mean the user would not have to check at least one of the other checkboxes in the other group of checkboxes.

I am using IE9 so the script should be compatible to use with IE9.

How can i do this ?

Here is my Code :

$('#form_check').on('submit', function (e) {
  if ($("input[id=checkbox1]:checked").length === 0) {
if ($("input[id=checkbox2]:checked").length === 1) {
}else{
 if ($("input[id=checkbox2]:checked").length === 0) {
if ($("input[id=checkbox1]:checked").length === 1) {

      e.preventDefault();
      alert('no way you submit it without checking a box');
      return false;
  }
});

Answer 1

This might be what you are looking for, if not let me know and I'll try and sort it out a bit better.

First let's tidy up that code a little. You appear to have a crazy tonne of if statements and most are not terminated.

Second I am under the impression you want to check if either is pressed and at least one is pressed but not both.

$('#form_check').on('submit', function (e) {
if ($("input[id=checkbox1]:checked").length === 0 && $("input[id=checkbox2]:checked").length === 0) { // if neither is selected && means and
    e.preventDefault();
    alert('nothing selected');
    return false;
}
else if (($("input[id=checkbox1]:checked").length === 1 && $("input[id=checkbox2]:checked").length === 0) || ($("input[id=checkbox2]:checked").length === 1 && $("input[id=checkbox1]:checked").length === 0)) { //if a is selected and b is not OR (||) b is selected but not a
        e.preventDefault();
        alert('congrats one or other of the check boxes is selected');
        return false;   
}
else{ //otherwise you must have selected both
    e.preventDefault();
    alert("you've managed to select BOTH yes and no");
    return false;
}
});

Answer 2

You can embedding every checkbox-group with a DIV with a class called "required"

<form id="form_check">
    <div class="required">
        <input type="checkbox" id="checkbox1" />Test 1
        <input type="checkbox" id="checkbox2" />Test 2
    </div>

    <div class="required">
        <input type="checkbox" id="checkbox3" />Test 3
        <input type="checkbox" id="checkbox4" />Test 4
    </div>
    <input type="submit" value="Submit" />
</form>

This JavaScript(jQuery) will check each 'required'-group. You have to check at least one checkbox of every group.

$('#form_check').on('submit', function (e) {
    e.preventDefault();
    $('.required').each(function () {
        if ( $(this).find('input:checked').length <= 0 ) {            
            alert('no way you submit it without checking a box');
        }
    });
});

JSfiddle