检查是否仅选中一个复选框 [英] check if only one checkbox is checked

问题描述

我有七个复选框，如下所示:

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

并且我有一个javascript函数，用于检查重复的电子邮件，如下所示:

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

但是现在，如果仅选中此复选框:

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

然后必须跳过电子邮件重复功能

但是最简单的检查方法是什么?还是必须检查是否所有其他复选框都未选中?

谢谢

这是清晰的屏幕截图:

好吧，但是如果我这样做的话:

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

仅出现在:选中任何其他复选框或不选中

查看图片: 在此处输入图片描述

如果我这样尝试:

$.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" )

它不起作用.查看图片:

oke.我现在是这样的:

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

所以我看到它是int的:

console.log("checked");

.但这也让她进来了:

 }, "Email adres");

当然不是必须的.

也许是即将到来，因为我在文件中上面有这个:

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

但是，如果选中第一个复选框，则当然不是必需的.

谢谢

，如果这样做的话:

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

所以这个:

   });  then I will get this warning:

警告:未为contactpersonen_email定义消息

如何组合此方法:

$('#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");
}});

使用此方法:

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

谢谢

解决方案

您可以按id检查特定的检查，然后按id形式查找其他内容.查看此小提琴或随附的代码段.

 $('#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> 

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

解决方案

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>

这篇关于检查是否仅选中一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！