javascript - check if only one checkbox is checked - Stack Overflow

I have seven checkboxes, like this:<div class="contact-label span11 rights"><div cla

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 bination");
}

//
    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 bination");
}   



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

so I see it es int:

console.log("checked");

. But it also es her in:

 }, "Email adres");

What ofcourse not has to be.

maybe it is ing 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 bination");
}   


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 bine 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 bination");
}});

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

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 bination");
}

//
    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 bination");
}   



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

so I see it es int:

console.log("checked");

. But it also es her in:

 }, "Email adres");

What ofcourse not has to be.

maybe it is ing 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 bination");
}   


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 bine 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 bination");
}});

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

Share Improve this question edited Oct 13, 2016 at 7:45 SavantCode asked Oct 11, 2016 at 14:54 SavantCodeSavantCode 1312 gold badges4 silver badges14 bronze badges 3
  • 2 Don't you want a radio input? – evolutionxbox Commented Oct 11, 2016 at 14:56
  • thank you. no. not radio. Because you have have checkboxes selected – SavantCode Commented Oct 11, 2016 at 14:57
  • 1 UM $(".checkbox:checked").length?? Is that what you are asking? – epascarello Commented Oct 11, 2016 at 14:58
Add a ment  | 

5 Answers 5

Reset to default 4

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 bination");
}});
<script src="https://ajax.googleapis./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>

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..

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");

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();

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 :)

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744966090a4603688.html

相关推荐

  • javascript - check if only one checkbox is checked - Stack Overflow

    I have seven checkboxes, like this:<div class="contact-label span11 rights"><div cla

    1天前
    60

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信