選擇多個ID - 必須選擇兩個複選框

有沒有辦法在做某事之前需要檢查兩個或多個ID。選擇多個ID - 必須選擇兩個複選框

例如：

如果BOTH 複選框 1和複選框2進行檢查，則事件發生。

但是，如果只有1個或另一個被自己檢查，則會發生其他事情。

我認爲這會工作，但不是。

function toggleStatus() { 
    if ($('#checkbox1 #checkbox2').is(':checked')) { 
$('.option1 :input').attr('checked', true); 
    } else { 
$('.option1 :input').attr('checked', false); 
} 

function toggleStatus() { 
    if ($('#checkbox1').is(':checked')) { 
$('.option2 :input').attr('checked', true); 
    } else { 
$('.option2 :input').attr('checked', false); 
} 

function toggleStatus() { 
    if ($('#checkbox2').is(':checked')) { 
$('.option3 :input').attr('checked', true); 
    } else { 
$('.option3 :input').attr('checked', false); 
}

希望我解釋正確。我找了三天，我被卡住了。謝謝你的幫助！

來源

2010-07-06 Mark H

我會給複選框一個普通的類。然後將其用作選擇器並對選中的值進行計數。然後如果兩個被檢查做一些事情。如果檢查一個，然後檢查那個值，並做相應的處理。

編輯：所以說，比如你分配一個公用類myCheckBoxes

所以，你可以做以下的僞代碼：

var myCheckBoxes = $('.myCheckBoxes:checked') //not sure on selector 

if (myCheckBoxes.length == 2) 
    //do something because both are checked 
else if (myCheckBoxes.length == 1) 
{ 
    if (myCheckBoxes.val() == "A") 
     // do something because A was checked 
    else if (myCheckBoxes.val() == "B") 
     // do something because B was checked 
}

來源

2010-07-06 22:52:26 spinon

，你需要從你的選擇中刪除的空間。 – user113716 2010-07-06 23:00:13

@帕特里克噢，沒有注意到。謝謝 – spinon 2010-07-06 23:16:43

這是一個很好的解決方案，但它可能不可讀。如果你沒有描述片段試圖做什麼 – GerManson 2010-07-07 00:26:36

$('#checkbox1, #checkbox2').change(function() { 
    if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { 
     // Do some stuff if both boxes are checked... 
    } 
});

來源

2010-07-06 22:55:17

謝謝。這工作像一個魅力。當我有更多時間時，我會研究其他解決方案。 – 2010-07-07 01:09:32

+14

如果這解決了您的解決方案，您應該將其標記爲您的問題的答案。 – 2012-04-10 00:06:03

你也可以使用jQuery add（）方法，但是這在大多數情況下最好。 – 2012-05-01 16:59:16

$(document).ready(function() { 
    var check1 = $("#check1"); 
    var check2 = $("#check2"); 

    // this method decides what to do when a checkbox is clicked 
    var trigger_event = function() { 
     if (check1.attr("checked") && check2.attr("checked")) { 
      event1(); 
     } 
     else if (check1.attr("checked") && !check2.attr("checked")) { 
      event2(); 
     } 
     else if (!check1.attr("checked") && check2.attr("checked")) { 
      event3(); 
     } 
    }; 

    // append event 
    check1.click(function() { 
     trigger_event(); 
    }); 

    check2.click(function() { 
     trigger_event(); 
    }); 

};

來源

2010-07-07 00:27:17 GerManson

謝謝大家！我會嘗試這些併發布我在這裏使用的。 – 2010-07-07 01:01:28

不要忘記標記爲答案最好的解決方案 – GerManson 2010-07-07 01:47:46

var ids = ['#checkbox1', '#checkbox2'], 
    $chx = $(ids.join(',')), 
    count = $chx.length; 

$chx.on('change', function() { 
    if ($chx.filter(':checked').length === count) { 
     // do stuff 
     console.log('all true'); 
    } 
});

如果複選框是被一些元素包裹：

<div class="check-group"> 
    <label><input id="checkbox1" type="checkbox"> one </label> 
    <label><input id="checkbox2" type="checkbox"> two </label> 
</div>

然後纏繞元件可以有事件偵聽器：

$('.check-group').each(function() { 

    var $this = $(this), 
     $chx = $this.find('input[type=checkbox]'), 
     count = $chx.length; 

    if (count === 0) { 
     return; 
    } 

    $this.on('change', function() { 
     if (count === $chx.filter(':checked').length) { 
      console.log('all checked'); 
     } 
    }); 
});

來源

2012-12-12 11:31:07 tiffon

我會給兩個（或像你一樣多）同一類=「chk_option」。當您在點擊事件定義爲每個簡單的做到這些

function isSelectedBoth(){ 
    var result = true; 
    $('.chk_option').each(function(){ 
     if(!$(this).is(':checked')) 
      result=false; 
    }); 
    return result; 
}

：

$('.chk_option').change(function(e){ 
    if (isSelectedBoth()){ 
    // do something if both are selected 
     alert('both checkboxes are selected'); 
    }else{ 
    // do something if not 
     alert('You must select both checkboxes'); 
    } 
});

，你甚至可以用更智能的功能做到這一點，然後isSelectedBoth如果您正在使用jQuery，那麼你可以這樣做（）它可以返回一些更有用的信息，然後是真/假，比如un/checked box的訂單號碼，un/checked元素的數組等。

來源

2012-12-12 13:08:32 Sasa

布爾邏輯ftw！所以我很確定你正在尋找所謂的獨家或XOR。這意味着如果只有一個操作數是真的，那麼整個表達式就是真的。如果兩個操作數都不爲真，或者兩者均爲真，則整個表達式將評估爲假。這個運營商是^。因此，這裏的代碼（借用克里斯爲基本格式）...

$('#checkbox1, #checkbox2').change(function() { 
    if($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { 
     // Both are checked 
    } 
    else if($('#checkbox1').is(':checked')^$('#checkbox2').is(':checked')) { 
     // Exactly one is checked 
    } 
});

在現實中，你因爲我們使用else if和第一if只需要一個或第二if蓋當兩者都檢查。但它並不那麼酷，顯然不能用它來做同樣的事情（並且更好地減少咳嗽咳嗽*）。

享受！

來源

2012-12-13 06:36:05 Pluto

有在你的代碼的兩個問題：

你使用$('#checkbox1 #checkbox2')選擇兩個複選框，但沒有一個逗號這是一個「ancestor descendant」 selector而不是multiple selector
is()運算符返回true如果至少有一個匹配給定的參數。所以，如果你使用if ($('#checkbox1, #checkbox2').is(':checked'))，只要任何一個（但不一定是兩者）複選框被選中

因此，爲了做一些事情的時候兩個複選框被選中，你需要在兩個分開使用is(':checked')這是真的如在the top-voted answer中所述。

下面是一個演示展示假設`.myCheckBoxes`指複選框自己is()行爲

$('input').on('change', function(ev) { 
 
    if ($('#checkbox1, #checkbox2').is(':checked')) { 
 
    console.log("is(':checked') true because at least one is checked"); 
 
    } else { 
 
    console.log("is(':checked') not true"); 
 
    }; 
 
    if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { 
 
    console.log("both checked"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label><input type="checkbox" id="checkbox1"/>checkbox1<label> 
 
<label><input type="checkbox" id="checkbox2"/>checkbox2</label>

來源

2017-06-21 19:37:44 user2314737

選擇多個ID - 必須選擇兩個複選框

回答

相關問題