Mehrere IDs auswählen - Beide Kontrollkästchen müssen ausgewählt sein

Question

Gibt es eine Möglichkeit, zwei oder mehr IDs zu prüfen, bevor Sie etwas tun?

Zum Beispiel:

Wenn BEIDE Checkbox 1 und 2 Checkbox geprüft werden dann das Ereignis eintritt.

Aber wenn nur die eine oder andere von selbst überprüft werden, passiert etwas anderes.

Ich dachte, das würde funktionieren, aber nein.

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

Hoffentlich erkläre ich das richtig. Ich habe drei Tage gesucht und bin festgefahren. Danke für jede Hilfe!

Answer 1

Ich würde den Checkboxen eine gemeinsame Klasse geben. Dann benutze das als Selektor und zähle die überprüften Werte. Dann, wenn zwei überprüft werden, etwas tun. Wenn man geprüft wird, dann prüfe den Wert und tue, was du entsprechend tun musst.

EDIT: So zum Beispiel sagen zugewiesen Sie eine gemeinsame Klasse von myCheckBoxes

So können Sie den folgenden Pseudo-Code tun:

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 
} 

Answer 2

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

Answer 3

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

}; 

Answer 4

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

Wenn die Kontrollkästchen sind Umwickelt von irgendeinem Element:

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

Dann kann das Umschlingungselement den Ereignis-Listener haben:

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

Answer 5

Ich würde beide geben (oder so viele, wie Sie möchten) die gleiche class = ‚chk_option‘. Wenn Sie jQuery verwenden, dann können Sie dies tun:

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

Wenn Sie die auf Klick-Ereignisse definieren für jeden einfach tun:

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

Sie können es auch mit intelligenter Funktion dann isSelectedBoth() wo es könnte etwas nützlicher als richtig/falsch, wie Bestellnummer von un/checked box, ein Array von Elementen un/geprüft etc.

Answer 6

Boolean Logik ftw! Ich bin mir ziemlich sicher, dass Sie nach etwas suchen, das als exklusives oder XOR bekannt ist. Dies bedeutet, dass, wenn nur ein einziger Operand wahr ist, der ganze Ausdruck wahr ist. Wenn keiner der Operanden wahr ist oder wenn beide wahr sind, wird der gesamte Ausdruck als falsch gewertet. Der Betreiber hierfür ist ^. Also hier ist der Code (von Chris als Grundformat borgen) ...

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

In Wirklichkeit nur eine ODER für das zweite if brauchen, da wir eine else if und die erste if verwenden abdeckt, wenn beide überprüft. Aber es ist nicht so cool und kann offensichtlich nicht für sich selbst verwendet werden (und ist besser für die Minimierung * Hustenhusten *).

Viel Spaß!

Answer 7

Es gibt zwei Probleme im Code:

1. Sie $('#checkbox1 #checkbox2') verwenden die beiden Kontrollkästchen zur Auswahl, aber ohne ein Komma, das ist ein “ancestor descendant” selector und kein multiple selector

2. Der Operator is() gibt true zurück, wenn mindestens ein der ausgewählten Elemente den angegebenen Argumenten entspricht. Also, wenn Sie if ($('#checkbox1, #checkbox2').is(':checked')) verwenden das ist wahr, wenn entweder ein (aber nicht unbedingt beide) Kontrollkästchen

Also, um etwas zu tun, wenn beiden Kontrollkästchen geprüft geprüft werden Sie is(':checked') sowohl separat verwenden müssen wie in the top-voted answer.

Hier eine Demo is() Verhalten zeigt,

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