用于检查其下方列表的 Jquery 复选框

Posted 2023-05-08

【中文标题】用于检查其下方列表的 Jquery 复选框

【英文标题】：Jquery Checkbox That Checks List Below It

【发布时间】：2017-01-29 19:12:31

【问题描述】：

如果您单击中间列表并取消选中其列表上方的所有复选框，我想构建一个 jquery 函数或 onclick 事件来检查所有复选框。

为了进一步解释，例如我有 5 个复选框：

Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4
Checkbox 5

第一种情况：

如果我点击复选框 3，下面的所有复选框都将被选中，即复选框 4 和复选框 5。

第二种情况：

如果我取消选中复选框 3，所有复选框 3,4 和 5 也将被取消选中。

【参考方案1】：

您可以使用更改事件，以便每次复选框更改其值时，您都可以为其余元素设置此新值（选中、未选中）：

//
// When a checkbox changes its value do....
//

$(':checkbox').on('change', function(e) 
  //
  // get current value: checked/unchecked
  //
  var chk = this.checked;
  
  //
  // get all next checkbox elements and set their values
  // to the current value: checked/unchecked
  //
  // $(this).nextAll(':checkbox').prop('checked', chk);

   // UPDATE
  //
  // get all next checkbox elements and set their values
  // to the current value: checked/unchecked
  //
  if (chk == true) 
    $(this).nextAll(':checkbox').prop('checked', chk);
   else 
    $(this).siblings(':checkbox').prop('checked', chk);
  
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
    <input type="checkbox" name="vehicle" value="1">1<br>
    <input type="checkbox" name="vehicle" value="2">2<br>
    <input type="checkbox" name="vehicle" value="3">3<br>
    <input type="checkbox" name="vehicle" value="4">4<br>
    <input type="checkbox" name="vehicle" value="5">5<br>
</form>

【讨论】：

您好，这很好用。但是，除了第一个被选中的复选框之外，有没有办法禁用所有选中的项目（不包括未选中的项目）？我注意到您仍然可以取消选中中间，并且并非所有上面的项目都取消选中。

@KingDavid 对不起，我不明白你在找什么。我更新了我的 sn-p: 测试它并让我确切地知道（即：举个例子）你在找什么。非常感谢

嗨@gaetonoM。这现在工作得很好。非常感谢您的帮助。

【参考方案2】：

好吧，您可以使用 JS 创建一个包含所有复选框的列表，并通过其中任何一个中的单击事件，您将迭代此列表并一一检查，设置属性“checked = true;”

希望对您有所帮助！ :)

【讨论】：

是的，我明白了，但是您将如何使用这些场景对其进行迭代？

您可以使用 Jquery 中的“each”方法，并使用索引的值来选择您想要的复选框。但是，gaetanoM 的答案更好！ :)

【参考方案3】：

<ul>
    <li><input type="checkbox" id="select_all"/> Selecct All</li>
    <li><input class="checkbox" id="1" type="checkbox" name="check[]"> This is Item 1</li>
    <li><input class="checkbox" id="2" type="checkbox" name="check[]"> This is Item 2</li>
    <li><input class="checkbox" id="3" type="checkbox" name="check[]"> This is Item 3</li>
    <li><input class="checkbox" id="4" type="checkbox" name="check[]"> This is Item 4</li>
    <li><input class="checkbox" id="5" type="checkbox" name="check[]"> This is Item 5</li>
    <li><input class="checkbox" id="6" type="checkbox" name="check[]"> This is Item 6</li>
</ul>

JQuery:

//$(this).attr('id') 获取当前id //$(":checkbox").length 获取所有复选框

 $('.checkbox').change(function() //".checkbox" change

       for(int i=$(this).attr('id');i<= $(":checkbox").length;i++)
       
           if(this.checked == false)
              $("#" + i).prop('checked', true);
           
           else
              $("#" + i).prop('checked', false);
           
         
    );

【参考方案4】：

我也想分享我的答案。这是上述答案的更新和修改：

 function fncSubCheck() 
//Use this instead of document.ready to make sure it will run when needed
        $(document).off('click', '.obj-check');
        $(document).on('click', '.obj-check', function (e) 
//Check if checkbox is check and check all items below it
            var blIsCheck = $(this).is(':checked');
            if (blIsCheck) 
                var objNext = $(this).parent().parent().nextAll().find('.obj-check');
                $(objNext).prop('checked', blIsCheck);
             else 
//Will uncheck all items above it
                var objPrev = $(this).parent().parent().prevAll().find('.obj-check');
                $(objPrev).prop('checked', blIsCheck);
            
        );