javascript - Jquery复选框勾选逻辑

Question

我有一个场景，我正在用 n 行填充数据表。这些行以具有特定组 ID 的组的形式填充。比如说，如果有 20 行并将它们分成 4 个组，那么前 5 行的组 id = 1，接下来的 5 行的组 id = 2，依此类推。在创建表时，每一行都将其组 ID 存储在一个变量中。

我的任务是为组中的所有行提供复选框，但仅使特定组的第一行可点击。如果用户选中/取消选中特定组的第一个复选框，则该特定组的所有复选框都被选中/取消选中。

我通过将计数器与每行的 id 元素连接起来，然后在每行上的整个表中运行一个循环，将当前行与其在组 id 上的前一行进行比较来实现这一点。如果当前行的group id与上一行相同，则获取上一行的checkbox状态，使当前checkbox状态相同。如果当前行的组 id 与前一行不同，则不执行任何操作。

这里的问题是，这个逻辑工作得很好，但只有一次。选中/取消选中所有框仅在它仅选中/取消选中该特定框但不适用于整个组之后才起作用。

如果需要，将提供更多信息。谢谢

function checkBoxTick(){
for(var i = 0; i<$('#grouprowcount').val(); i++){
    if(i != 0){
    var previd = $('#groupId'+(i-1)).val();
    var nextid = $('#groupId'+(i)).val();
    if(previd == nextid ){
        $("#numid"+(i)).attr("checked", true);
        if($("#numid"+(i-1)).is(":checked")){
            
        $("#numid"+(i)).attr("checked", true);
        }
        else if($("#numid"+(i-1)).is(":not(:checked)")){
            $("#numid"+(i)).attr("checked", false);
            }
    }
    
    }   
}

标签： javascriptjquery

Answer 1

请检查这是否是您需要的，否则我建议您向我们展示您自己的代码片段。

var groupCount = 2;

for(var i = 1; i <= groupCount; i++)
  $(':checkbox').filter('[name="group-'+i+'"]').not(':first').prop('disabled', true);

$(':checkbox').not(':disabled').change(function() {
  var group = $(this).attr('name');
  var checked = $(this).prop('checked');
  $(':checkbox').filter('[name="'+ group +'"]').prop('checked', checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr><td><input type="checkbox" name="group-1" /></td></tr>
  <tr><td><input type="checkbox" name="group-1" /></td></tr>
  <tr><td><input type="checkbox" name="group-1" /></td></tr>
  <tr><td><input type="checkbox" name="group-2" /></td></tr>
  <tr><td><input type="checkbox" name="group-2" /></td></tr>
  <tr><td><input type="checkbox" name="group-2" /></td></tr>
</table>