检查是否仅选中一个复选框

Question

I have seven checkboxes, like this:

<div class="contact-label span11 rights">
          <div class="row-fluid">
            <div class="span3">
              <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canorder_0" id="contactpersonen_canorder_0"></input>
              <label class="checkbox" for="contactpersonen_canorder_0">Mag border plaatsen</label>

              <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseestock_0" id="contactpersonen_canseestock_0"></input>
              <label class="checkbox" for="contactpersonen_canseestock_0">Mag gderen afhalen</label>
            </div>
            <div class="span3">
              <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseeorders_0" id="contactpersonen_canseeorders_0"></input>
              <label class="checkbox" for="contactpersonen_canseeorders_0">Mag orders inzien</label>

              <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canaddaddress_0" id="contactpersonen_canaddaddress_0"></input>
              <label class="checkbox" for="contactpersonen_canaddaddress_0">Mag bezorgadressen aanpassen</label>
            </div>
            <div class="span3">
              <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseeprice_0" id="contactpersonen_canseeprice_0"></input>
              <label class="checkbox" for="contactpersonen_canseeprice_0">Mag netto prijs zien</label>

              <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseecredit_0" id="contactpersonen_canseecredit_0"></input>
              <label class="checkbox" for="contactpersonen_canseecredit_0">Mag facturen en creditfacturen inzien</label>
            </div>
            <div class="span3">
              <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseepickup_0" id="contactpersonen_canseepickup_0"></input>
              <label class="checkbox" for="contactpersonen_canseepickup_0">Mag wijzigingen doorgeven</label>
            </div>
          </div>
        </div>

and I have a javascript function for checking duplicate email, like this:

$.validator.addMethod("contactpersonen-email", function(value, element) {
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    if (value != '') {
        $(parentForm.find(':text')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }
        });
    }

    var ok = timeRepeated === 1 || timeRepeated === 0;
    if(!ok) alert('Emaild adres bestaat al');
    return ok;
}, "Email adres bestaat al");

But now if only this checkbox is checked:

<input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseestock_0" id="contactpersonen_canseestock_0"></input>
              <label class="checkbox" for="contactpersonen_canseestock_0">Mag gderen afhalen</label>

Then is has to skip the email duplicate function

But what is the easiest way to check for that? Or you have to check if every other checkbox is not checked?

Thank you

this is a screenshot for cleareness:

Oke, but if I do it like this:

$.validator.addMethod("contactpersonen-email", function(value, element) {
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    if (value != '') {
        $(parentForm.find(':text')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }
        });
    }






 //
$("#contactpersonen_canseestock_0").attr('checked', true);
//Alleen een is checked en dat is Mag gderen afhalen
if ($("#contactpersonen_canseestock_0").is(":checked") && $('#formid :checkbox:checked').length == 1) {
  alert("checked");
} else {
  // any other check box is checked or none
  alert("other combination");
}

//
    var ok = timeRepeated === 1 || timeRepeated === 0;
    if(!ok) alert('Emaild adres bestaat al');
    return ok;
}, "Email adres bestaat al");

it goes only in: any other check box is checked or none

see image: enter image description here

If I try it like this:

$.validator.addMethod("contactpersonen-email", function(value, element) {
    if($("#contactpersonen_canseestock_0").is(':checked')) {
    console.log('email is nice');
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    if (value != '') {
        $(parentForm.find(':text')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }       
        });
    }
    var ok = timeRepeated === 1 || timeRepeated === 0;
    if(!ok) alert('Emaild adres bestaat al');
    return ok;
}else{
console.log('jkshdfkjsdhf');
return;
}}, "email bestaat al" )

it doesnt work. see image:

oke. I have it now like this:

$.validator.addMethod("contactpersonen-email", function(value, element) {
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    if (value != '') {
        $(parentForm.find(':text')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }
        });
    }

 //


//
    var ok = timeRepeated === 1 || timeRepeated === 0;
    $("#contactpersonen_canseestock_0").attr('checked', true);
//Alleen een is checked en dat is Mag gderen afhalen
if ($("#contactpersonen_canseestock_0").is(":checked") && $('#formid :checkbox:checked').length == 1) {
  console.log("checked");
    return;
} else {
    if(!ok) alert('Emaild adres bestaat al');
    return ok;

  // any other check box is checked or none
  console.log("other combination");
}   



    //if(!ok) alert('Emaild adres bestaat al');
    //return ok;
}, "Email adres");

so I see it comes int:

console.log("checked");

. But it also comes her in:

 }, "Email adres");

What ofcourse not has to be.

maybe it is coming because I have above in the file this:

contactpersonen_email1:{
                                        required:true,
                                        email:true
                                        },  

But it is then not required ofcourse if the first checkbox is checked.

Thank you

and if do it like this:

if ($("#contactpersonen_canseestock_0").is(":checked") && $('#formid :checkbox:checked').length == 1) {
  console.log("checked");
    return;
} else {
    if(!ok) alert('Emaild adres bestaat al');
    console.log('not checked');
    return ok;

  // any other check box is checked or none
  console.log("other combination");
}   


return;
    //if(!ok) alert('Emaild adres bestaat al');
    //return ok;
});

so this:

   });  then I will get this warning:

Warning: No message defined for contactpersonen_email

How to combine this method:

$('#formid :checkbox').change(function() {
//only one is checked and that is Mag gderen afhalen
if ($("#contactpersonen_canseestock_0").is(":checked") && $('#formid :checkbox:checked').length == 1) {
  console.log("only Mag gderen afhalen checked");
} else {
  // any other check box is checked or none
  console.log("other combination");
}});

with this method:

$.validator.addMethod("contactpersonen-email", function(value, element) {
    var parentForm = $(element).closest('form');
    var timeRepeated = 0;
    if (value != '') {
        $(parentForm.find(':text')).each(function () {
            if ($(this).val() === value) {
                timeRepeated++;
            }
        });
    }


    var ok = timeRepeated === 1 || timeRepeated === 0;
    if(!ok) alert('Emaild adres bestaat al');
    return ok;
}, "Email adres bestaat al");

Thank you

Answer 1

i think your question is about how many are checked, not if a certain one is checked..

$("input[type='checkbox']:checked").length will give you the number of checked checkboxes..

Answer 2

You do not need jQuery for this...

//To count how many are checked/ticked
document.querySelectorAll('input[type="checkbox"]:checked').‌​length

//To check a specific checkbox...
if(document.getElementById('contactpersonen_canseestock_0').checked) {
    // It is checked, do something
} else {
    // Not checked, do something else
}

But if you want jQuery...

if($("#contactpersonen_canseestock_0").is(':checked')){
    // It is checked, do something
} else {
    // Not checked, do something else
}

Edit:

$.validator.addMethod("contactpersonen-email", function(value, element) {

    if($("#contactpersonen_canseestock_0").is(':checked')) {
        var parentForm = $(element).closest('form');
        var timeRepeated = 0;
        if (value != '') {
            $(parentForm.find(':text')).each(function () {
                if ($(this).val() === value) {
                    timeRepeated++;
                }
            });
        }

        var ok = timeRepeated === 1 || timeRepeated === 0;
        if(!ok) alert('Emaild adres bestaat al');
        return ok;
    } else {
        return;
    }

}, "Email adres bestaat al");

Answer 3

You can check the specific check by id, and then find out about others by the form id. Check out this fiddle or the attached snippet.

 $('#formid :checkbox').change(function() { //only one is checked and that is Mag gderen afhalen if ($("#contactpersonen_canseestock_0").is(":checked") && $('#formid :checkbox:checked').length == 1) { console.log("only Mag gderen afhalen checked"); } else { // any other check box is checked or none console.log("other combination"); }}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="contact-label span11 rights" id="formid"> <div class="row-fluid"> <div class="span3"> <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canorder_0" id="contactpersonen_canorder_0"></input> <label class="checkbox" for="contactpersonen_canorder_0">Mag border plaatsen</label> <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseestock_0" id="contactpersonen_canseestock_0"></input> <label class="checkbox" for="contactpersonen_canseestock_0">Mag gderen afhalen</label> </div> <div class="span3"> <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseeorders_0" id="contactpersonen_canseeorders_0"></input> <label class="checkbox" for="contactpersonen_canseeorders_0">Mag orders inzien</label> <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canaddaddress_0" id="contactpersonen_canaddaddress_0"></input> <label class="checkbox" for="contactpersonen_canaddaddress_0">Mag bezorgadressen aanpassen</label> </div> <div class="span3"> <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseeprice_0" id="contactpersonen_canseeprice_0"></input> <label class="checkbox" for="contactpersonen_canseeprice_0">Mag netto prijs zien</label> <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseecredit_0" id="contactpersonen_canseecredit_0"></input> <label class="checkbox" for="contactpersonen_canseecredit_0">Mag facturen en creditfacturen inzien</label> </div> <div class="span3"> <input type="checkbox" class="input-text" value="Y" name="contactpersonen_canseepickup_0" id="contactpersonen_canseepickup_0"></input> <label class="checkbox" for="contactpersonen_canseepickup_0">Mag wijzigingen doorgeven</label> </div> </div> </div> 

Answer 4

You might simply do like;

document.querySelectorAll("[type=checkbox]:checked").length === 1

In your case more precisely:

document.querySelector("div.contact-label.span11.rights")
        .querySelectorAll("[type=checkbox]:checked").length === 1 ? doThis()
                                                                  : doThat();

Answer 5

Since you only want to check if that specific checkbox is checked, With a little bit of jQuery is easy... Use conditionals and :checked, like this:

if($("#contactpersonen_canseestock_0").is(":checked")){

     //Skip Function

}
else{
     doThisFunction();
}

Hope it helps. Regards :)