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

2019-11-21 02:37:15 阅读：186 来源： 互联网

标签：if-statement html arrays javascript jquery

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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