通过单击第一个选择多个复选框

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

这使第一个复选框成为所有对象的全局控件

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

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

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

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

Answer 3

您可以尝试以下代码。 它会帮助你。

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 4

您可以尝试此代码段。

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