jQuery wählen Sie zwei und nur zwei Kontrollkästchen

Question

Ich arbeite an einer Lösung, die zwei Zeilen in einer Tabelle vergleichen wird. Die grundlegendste Tabellenstruktur ist unten dargestellt:

<table id="historyTable"> 
    <tr> 
    <td><input type="checkbox" id="row_0" /></td> 
    <td>same</td> 
    <td>r0c2</td> 
    <td>r0c3</td> 
    <td>r0c4</td> 
    <td>r0c5</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" id="row_1" /></td> 
     <td>same</td> 
     <td>same</td> 
     <td>r1c3-different</td> 
     <td>same</td> 
     <td>same</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" id="row_2" /></td> 
     <td>same</td> 
     <td>same</td> 
     <td>r2c3</td> 
     <td>same</td> 
     <td>same</td> 
    </tr> 
</table> 

Dies wird aus einer Datenbank gefüllt werden, so, offensichtlich gibt n Anzahl der Zeilen sein wird, aber jede Zeile wird ein Kontrollkästchen auf das DOM mit der Namenskonvention hinzufügen im obigen Beispiel fest codiert.

Ich dachte, dass der "harte Teil" die verschiedenen Zellwerte hervorheben würde - das war einfach. Der schwierige Teil arbeitet mit den Checkboxen, um sicherzustellen, dass zwei und nur zwei ausgewählt werden.

Ich versuchte mit verschiedenen Takes auf .each("td").is(":checked").id, die eine gute Arbeit gemacht haben, mir die id Eigenschaft der Checked Checkboxen, aber ich habe keine Ahnung, wie Sie die Auswahl auf zwei Auswahlen beschränken.

Die Idee ist, sobald das zweite Kontrollkästchen aktiviert ist, wird eine Funktion ausgelöst, um die Unterschiede in den ausgewählten Zeilen hervorzuheben.

Könnte jemand bitte mich in eine Richtung anstoßen, um das gewünschte Ergebnis zu erzielen?

Answer 1

Siehe Demo hier

<table id="historyTable"> 
    <tr> 
    <td><input type="checkbox" id="row_0" /></td> 
    <td>same</td> 
    <td>r0c2</td> 
    <td>r0c3</td> 
    <td>r0c4</td> 
    <td>r0c5</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" id="row_1" /></td> 
     <td>same</td> 
     <td>same</td> 
     <td>r1c3-different</td> 
     <td>same</td> 
     <td>same</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" id="row_2" /></td> 
     <td>same</td> 
     <td>same</td> 
     <td>r2c3</td> 
     <td>same</td> 
     <td>same</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" id="row_3" /></td> 
     <td>same</td> 
     <td>same</td> 
     <td>r2c3</td> 
     <td>same</td> 
     <td>same</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox" id="row_4" /></td> 
     <td>same</td> 
     <td>same</td> 
     <td>r2c3</td> 
     <td>same</td> 
     <td>same</td> 
    </tr> 
</table> 
<p id='output'></p> 


    var inputs=document.getElementsByTagName('INPUT'); 
var limit=2; 
var count=0; 
for(input of inputs) 
{ 
    input.addEventListener("change",function(e){ 
     restrictLimit(e); 
    }); 
} 
function restrictLimit(e) 
{ 
    if(e.target.checked==true) 
    { 
    count++; 
    if(count>limit) 
     { 
     e.target.checked=false; 
     count=limit; 
     } 
    } 
    else 
    { 
     count--; 
    } 
    document.getElementById('output').innerHTML="Checkbox Selected:"+count; 
} 

Answer 2

Sie können nicht .is(":checked") auf einem <td> verwenden, es muss auf das Kontrollkästchen innerhalb der <td> getan werden. Und .each() erfordert ein Funktionsargument, das auf jedem Element ausgeführt wird.

Aber der einfache Weg ist, alle markierten Kästchen auszuwählen und sie mit .length zu zählen.

if ($("td :checkbox:checked").length == 2) { 
    // do stuff 
} else { 
    alert("Check exactly 2 rows"); 
}