检查是否只选中了一个复选框

时间：2016-10-11 14:54:55

标签： javascript jquery html

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

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

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

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

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

但最简单的检查方法是什么？或者您必须检查是否未选中其他每个复选框？

谢谢

这是一个清晰的屏幕截图：

enter image description here

Oke，但如果我这样做的话：

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

仅用于：选中任何其他复选框或无

见图片： enter image description here

如果我这样试试：

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

它不起作用。见图像：

enter image description here

OKE。我现在就这样：

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:

所以这个：

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

警告：没有为contactpersonen_email定义消息

如何组合此方法：

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

用这种方法：

1

谢谢

5 个答案:

答案 0 :(得分：2)

我认为你的问题是关于检查了多少，而不是检查了某一个..

$("input[type='checkbox']:checked").length会为您提供已选中复选框的数量..

答案 1 :(得分：1)

你不需要jQuery ...... 

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

但是如果你想要jQuery ...... 

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

修改 

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

答案 2 :(得分：1)

您可以按ID检查特定检查，然后通过表单ID查找其他内容。查看此fiddle或附加的代码段。

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

答案 3 :(得分：0)

你可能只是喜欢; 

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

更确切地说，在你的情况下：

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

答案 4 :(得分：-1)

因为您只想检查是否选中了特定复选框，所以使用一点点jQuery很容易...使用条件和：选中，如下所示：

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

     //Skip Function

}
else{
     doThisFunction();
}

希望它有所帮助。问候:)

相关问题
最新问题