Question

我的复选框组位于html表格中。每行都有checbox组。我试图在表的每一行中放置一个select_all按钮（可以选择全部或取消选中该特定行的所有复选框）。我用javascript就是为了这个目的。但是，选择所有按钮检查表的所有checkbx。我找不到适用于单行的select_all按钮的方法。有什么想法吗？

我认为javascript的变化可以解决这个问题，但我对javascript或jquery不熟悉。

function checkAll(bx) {
    var cbs = document.getElementsByTagName('input');
    for (var i = 0; i < cbs.length; i++) {
        if (cbs[i].type == 'checkbox') {
            cbs[i].checked = bx.checked;
        }
    }
}

<form action="backend.php" method="POST" target="iframe_3"> 
    <table border="10" width="900" bordercolor="green">
        <tr> 
            <td colspan="3"  style="background-color:#7F77AE">DNA</td> 
            <td><input type="checkbox" name="check_list[]" value="value 1">seq</td> 
            <td><input type="checkbox" name="check_list[]" value="value 2">codon</td>
            <td><input type="checkbox" onclick="checkAll(this)">Select_all</td> 
        </tr> 
        <tr> 
            <td colspan="3"  style="background-color:#7F77AE">RNA</td> 
            <td><input type="checkbox" name="check_list2[]" value="value 3">seq</td> 
            <td><input type="checkbox" name="check_list2[]" value="value 4">codon</td> 
            <td><input type="checkbox" onclick="checkAll(this)">Select_all</td> 
        </tr> 
    </table>

Answer 1

使用jQuery，这是一项微不足道的任务。实际上，您只需查询特定<input>节点内的<tr>个节点。

function checkAll(bx) {
    var cbs = $( bx ).closest( 'tr' ).find( 'input:checkbox' );
    for(var i=0; i < cbs.length; i++) {
        if(cbs[i].type == 'checkbox') {
            cbs[i].checked = bx.checked;
        }
    }
}

没有jQuery，这看起来像

function checkAll(bx) {
    var cbs = bx.parentNode.parentNode.querySelectorAll( 'input[type="checkbox"]' );
    for(var i=0; i < cbs.length; i++) {
        if(cbs[i].type == 'checkbox') {
            cbs[i].checked = bx.checked;
        }
    }
}

Answer 2

jQuery方式：

$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);

fiddle

Answer 3

检查一下

            <tr> 
            <td colspan="3"  style="background-color:#7F77AE">DNA</td> 
            <td><input type="checkbox" name="check_list[]" value="value 1">seq</td> 
            <td><input type="checkbox" name="check_list[]" value="value 2">codon</td>
            <td><input type="checkbox" onclick="checkAll(this)" id="check_list" role="selectall">Select_all</td> 
            </tr> 

            <tr> 
            <td colspan="3"  style="background-color:#7F77AE">RNA</td> 
            <td><input type="checkbox" name="check_list2[]" value="value 3">seq</td> 
            <td><input type="checkbox" name="check_list2[]" value="value 4">codon</td> 
            <td><input type="checkbox" onclick="checkAll(this)" id="check_list2" role="selectall">Select_all</td> 
            </tr> 
            </table> 
            <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
            <script type="text/javascript">
            (function($){
                $(document).ready(function(e) {
                    $('[role="selectall"]').each(function(){
                        // + handle click of select all
                        $(this).bind('click.selall', handleSelectAll);
                        var group_name = $(this) .attr('id')+'[]';
                        $('[name='+group_name+']').bind('click.single', handleSingle);
                    })
                });

                function handleSingle(){
                    var grp_name = $(this).attr('name');
                    var sel_all_id = grp_name.replace('[','').replace(']', '');
                    if( $('[name='+grp_name+']').length == $('[name='+grp_name+']:checked').length){

                        $('#'+grp_name).prop('checked', true);
                    }else{
                        $('#'+grp_name).prop('checked', false)
                    }
                }
                function handleSelectAll(){
                    var group_name = $(this) .attr('id')+'[]';
                    if( $(this).is(':checked')){
                        $('[name='+group_name+']').prop('checked', true);
                    }else{
                        $('[name='+group_name+']').prop('checked', false);  
                    }
                }
            })(jQuery)
            </script>

键是select all复选框的id与没有paranthesis的组名相同

Javascript“check all”多个复选框组的子集

3 个答案: