Jquery 检查下方列表的复选框

Question

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

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

Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4
Checkbox 5

第一种情况：

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

第二种情况：

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

Answer 1

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

希望对您有所帮助！ :)

Answer 2

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

//
// 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>

Answer 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);
           }
       }  
    });

Answer 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);
            }
        });
    }

Jquery 检查下方列表的复选框

Jquery Checkbox That Checks List Below It

jquery

jquery-ui

jquery-selectors

jquery-select2