如果从可能的复选框列表中只选中了一个特定的复选框，则返回 Javascript

Javascript returning if only one certain checkbox is checked out of a list of possible checkboxes

本文关键字：复选框 一个 Javascript 返回 列表 如果      更新时间：2023-09-26

我有一个复选框列表，需要选中一个或两个特定的框才能返回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 的数组会起作用吗？我认为这可能走在正确的轨道上，但我不知道该怎么做。

任何意见和帮助都非常感谢。

假设您有办法找到正确的复选框集（所有复选框上的共享类等），您可以计算列表中的复选框数量。如果它是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>

您可以做的是创建一个正确答案数组，发现每行的选定答案，并确定它是"正确"还是"不正确"。

您可以使用此代码返回复选框状态数组（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/

相关文章：