如果在可能的复选框列表中仅选中了某个复选框,则返回Javascript

我有一个复选框列表,需要选中一个或两个特定的复选框才能返回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>

如您所见,有很多可能的复选框,但是在这种情况下,仅必须检查cCorrect1才能使javascript返回true.所有其他复选框都作为类,因为我有多个遵循相同结构的表.

当前,如果选中了cCorrect1,我的Javascript将返回true,但是如果还选中了任何其他框,则Javascript也显然将返回true.

我的Javascript：

//Quiz Functions

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

if(cCorrect1.checked){

    cCorrect = true;

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

    cCorrect = false;

}

});

是否可以使用检查复选框并找出何时选中cCorrect1的数组起作用？我认为这可能是在正确的轨道上,但我不知道该如何去做.

任何意见和帮助,我们将不胜感激.

解决方法:

假设您有办法找到正确的复选框集(所有复选框均处于共享类,等等),则可以计算列表中复选框的数量.如果它是1,并且您的目标框已选中,那就很好.

在此示例中,我向包含复选框的表添加了一个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>

标签：if-statement,html,arrays,javascript,jquery
来源： https://codeday.me/bug/20191121/2048443.html