Question

我有一个带有许多复选框的html表。如果我选中第一个复选框，则会自动选择下一个复选框。有人知道怎么做吗？此外，表中的确切行号未知。

function toggle(source) {
  var row_index = $("#checkFirst").index();
  var row_first = $(".row").index();
  checkboxes = document.getElementsByName('row');

  for (var i = 0, n = checkboxes.length; i < n; i++) {
    if (i == row_index && i == row_first) {
      checkboxes[i].checked = source.checked;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody data-bind="foreach: list">
  <tr>

    <td><input type="checkbox" id="checkFirst" onClick="toggle(this)" /></td>

    <td><input type="checkbox" name="row"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>

  </tr>
</tbody>

Answer 1

您可以使用以下代码。首先给所有其他复选框提供类复选框。希望这可以帮到你

$(function(){

$("#checkFirst").click(function () {
      $('.checkbox').attr('checked', this.checked);
});

$(".checkbox").click(function(){

    if($(".checkbox").length == $(".checkbox:checked").length) {
        $("#checkFirst").attr("checked", "checked");
    } else {
        $("#checkFirst").removeAttr("checked");
    }

});
});

Answer 2

您可以在jquery中使用next()方法：

＆＃13;

$(':input').on('click', function() {
    var id = '#'+ $(this).attr('id');
    if($(id).is(':checked')){
      $('#' + $(this).next().attr('id')).prop('checked',true);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>

<td><input id='1' type="checkbox"/></td>
<td><input id='2' type="checkbox"></td>
<td><input id='3' type="checkbox"></td>
<td><input id='4' type="checkbox"></td>
<td><input id='5' type="checkbox"></td>

</tr>
</tbody>

＆＃13;

Answer 3

这使得第一个复选框成为所有

的全局控件

＆＃13;

$('#checkFirst').on('change',function(){
  if($(this).is(':checked'))
    $('input[type="checkbox"]').prop('checked', true);
  else
    $('input[type="checkbox"]').prop('checked', false);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<tbody data-bind="foreach: list">
<tr>

<td><input type="checkbox" id="checkFirst"/></td>

<td><input type="checkbox" name="row"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>

</tr>

</tbody>

＆＃13;

这是在同一行中选择以下复选框

$('input[type="checkbox"]').on('change',function(){
    $(this).parent().nextAll().find('input[type="checkbox"]').prop('checked', $(this).is(':checked'));
});

Answer 4

您可以尝试使用以下代码。它会对你有所帮助。

jQuery文件： https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

<table>
<tbody data-bind="foreach: list">
<tr id="first">

<td><input type="checkbox" id="checkfirst" onClick="toggle('first',this.id)"/></td>

<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>
<td><input type="checkbox" name="row"></td>

</tr>
<tr id="second">

<td><input type="checkbox" id="checksecond" onClick="toggle('second',this.id)"/></td>

<td><input type="checkbox" ></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>

</tr>
</table>

脚本

<script>
function toggle(source,id) {
chcked = $('#'+id).prop( "checked" );
if(chcked)
{
  $('#'+source+' :checkbox').each(function() {
        this.checked = true;                        
    });
}
else
{
     $('#'+source+' :checkbox').each(function() {
        this.checked = false;                        
    });
}  
}
</script>

Answer 5

您可以尝试使用此代码段。

function handleCheck(e) {
    let will_change = false;
    if (e.shiftKey && this.checked) {
        checkboxes.forEach(element => {
            if (element === this || element === last_checked) {
                will_change = !will_change;
            }
            if (will_change) {
                element.checked = true;
            }
        });
    }
    last_checked = this;
}

然后将click事件侦听器添加到要作为组

的每个复选框

https://codepen.io/anon/pen/GyQEJZ

单击第一个复选框，选中多个复选框

5 个答案: