檢查是否僅選中一個復選框

Question

我有七個復選框，如下所示：

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

謝謝

Answer 1

我認為您的問題是關於檢查了多少，而不是是否檢查了某一個。

$("input[type='checkbox']:checked").length將為您提供選中復選框的數量。

Answer 2

您不需要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");

Answer 3

您可以按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> 

Answer 4

您可能會簡單地喜歡；

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

在您的情況下，更准確地說：

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

Answer 5

由於您只想檢查特定的復選框是否已選中，因此使用jQuery有點簡單...使用條件語句和：checked，如下所示：

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

     //Skip Function

}
else{
     doThisFunction();
}

希望能幫助到你。 問候 ：）