如果只從復選框列表中選中一個特定復選框，則Javascript返回

Question

我有一個復選框列表，需要檢查一個或兩個特定的框才能返回true，但是我不確定如何檢查是否只檢查了所需的框而沒有其他框。

復選框的HTML如下：

<table style="width:135px; height:200px; margin: 0 auto; margin-top: -200px;">
  <tr>
    <td><input type="checkbox" class="f1s1c"></td>
    <td><input type="checkbox" class="f1s2"></td>
    <td><input type="checkbox" class="f1s3"></td>
    <td><input type="checkbox" class="f1s4"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="f2s1"></td>
    <td><input type="checkbox" class="f2s2"></td>
    <td><input type="checkbox" class="f2s3"></td>
    <td><input type="checkbox" class="f2s4"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="f3s1"></td>
    <td><input type="checkbox" class="f3s2"></td>
    <td><input type="checkbox" class="f3s3"></td>
    <td><input type="checkbox" id="cCorrect1"></td>
  </tr>
  <tr>
    <td><input type="checkbox" class="f4s1"></td>
    <td><input type="checkbox" class="f4s2"></td>
    <td><input type="checkbox" class="f4s3"></td>
    <td><input type="checkbox" class="f4s4"></td>
  </tr>
</table>

正如您所看到的那樣，有許多可能的chekbox，但在這種情況下，只有cCorrect1必須被檢查才能使javascript返回true。 所有其他復選框都是類，因為我有多個表遵循相同的結構。

目前，如果選中cCorrect1，我的Javascript將返回true，但如果同時檢查任何其他框，則顯然也會返回true。

我的Javascript：

//Quiz Functions

$("#checkC").click(function(){

if(cCorrect1.checked){

    cCorrect = true;

}else if(cCorrect1.checked == false){

    cCorrect = false;

}

});

使用一個數組檢查復選框，並找出檢查cCorrect1何時可以工作？ 我認為這可能是正確的軌道，但我不知道如何去做。

非常感謝任何輸入和幫助。

Answer 1

假設您有辦法找到正確的復選框（所有復選框上的共享類等），您可以計算列表中復選框的數量。 如果它是1 ，並且您的目標框被選中，那么您就是好的。

在這個例子中，我在包含復選框的table中添加了一個id ，以便於查找。 刪除了樣式，以便表格可見。

 $("#checkC").click(function(){ // the one we want var cCorrect1 = $('#cCorrect1'); // all checked checkboxes in the table var checks = $('#boxes input[type=checkbox]:checked'); var cCorrect = cCorrect1.prop('checked') && (checks.length == 1); alert(cCorrect ? "correct" : "incorrect"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="boxes" > <tr> <td><input type="checkbox" class="f1s1c"></td> <td><input type="checkbox" class="f1s2"></td> <td><input type="checkbox" class="f1s3"></td> <td><input type="checkbox" class="f1s4"></td> </tr> <tr> <td><input type="checkbox" class="f2s1"></td> <td><input type="checkbox" class="f2s2"></td> <td><input type="checkbox" class="f2s3"></td> <td><input type="checkbox" class="f2s4"></td> </tr> <tr> <td><input type="checkbox" class="f3s1"></td> <td><input type="checkbox" class="f3s2"></td> <td><input type="checkbox" class="f3s3"></td> <td><input type="checkbox" id="cCorrect1"></td> </tr> <tr> <td><input type="checkbox" class="f4s1"></td> <td><input type="checkbox" class="f4s2"></td> <td><input type="checkbox" class="f4s3"></td> <td><input type="checkbox" class="f4s4"></td> </tr> </table> <button id="checkC">check</button> 

Answer 2

您可以做的是創建一組正確答案，每行發現所選答案，並確定它是“正確”還是“不正確”。

您可以使用此代碼返回復選框狀態數組（0表示未選中，1表示已選中），並決定從那里做什么：

var $table = this.$('tbody');
        $(".resultBtn").click(function(){
            var outStr = '';
            for(var i= 0,len=$table.children().length;i<len;i++){
                var $tr = $table.children().eq(i);
                outStr += 'row' + (i+1) + ' checked boxes:[';
                for(var j= 0;j<$tr.children().length;j++){
                    var $td = $tr.children().eq(j);
                    if($td.find(':checked').length > 0 ){
                        $td.addClass('selected');
                        outStr += '1,';
                    } else{
                        outStr += '0,';
                    }
                    if(j==$tr.children().length-1) outStr = outStr.substring(0, outStr.length - 1);
                }
                outStr += ']';
            }
            alert(outStr);
        });

示例： http ： //jsfiddle.net/y3yp4ag1/2/