为什么我的复选框不起作用？ 我正在使用codeigniter，这是我的观点

Question

I want make checkbox for checking all sub checkboxes.

My checkbox:

<table width="30%" class="table striped hovered cell-hovered border bordered">
            <tr valign="middle">
                <td><b>IDPEL</b></td>
                <td><b>No. Baris</b></td>
                <td><b><input type="checkbox" id="pilihsemua"/> Pilih Semua</b></td>

            </tr>
            <?php

                foreach ($panel_error as $key) {



                    echo"<tr><td>".$key->errpanel."</td>";
                    echo"<td>".$key->nomorBaris."</td>";
                    echo"<td>";
                    echo form_checkbox('chk_boxes1[]',$key->errpanel);
                    echo"</td></tr>";

                }


            ?>
        </table>

and here is my script:

<script type="text/javascript">
    $(document).ready(function () {
        $('.chk_boxes').click(function(){
            $('.chk_boxes1').attr('checked',checked)
        })

        $('#table1').dataTable();
        $('#table2').dataTable();

        //checkbox
        $("#pilihsemua").click(function () { // If #pilihsemua checked, all checkbox will be checked.
            $('.chk_boxes1[]').attr('checked', checked);
        });
        // if all sub checkboxes are being checked, #pilihsemua will automatically checked.
        $(".chk_boxes1[]").click(function(){

            if($(".chk_boxes1[]").length == $(".chk_boxes1[]:checked").length) {
                $("#pilihsemua").attr("checked", "checked");
            } else {
                $("#pilihsemua").removeAttr("checked");
            }

        });
        //end of checkbox
    });

</script>

But still, I don't know why, it can't be work. I try to check #pilihsemua but all the sub classes doesn't be checked. Or if I checked all the sub classes, the #pilihsemuadoesn't be checked too.

Answer 1

Maybe Its close to this:

But this script has some flaws.. Just try to figure out whats wrong..

Example: HTML CODE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table width="30%" cellspacing="1" cellpadding="1" border="collapse">
            <tr>
                <td><b><input type="checkbox" class="group" chk="g1"/> Pilih Semua</b></td>
                <td><b><input type="checkbox" class="group" chk="g2"/> Pilih Semua</b></td>
                <td><b><input type="checkbox" class="group" chk="g3"/> Pilih Semua</b></td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="g1"/>
                <input type="checkbox" class="g1"/>
                <input type="checkbox" class="g1"/>
              </td>
              <td>
                <input type="checkbox" class="g2"/>
                <input type="checkbox" class="g2"/>
                <input type="checkbox" class="g2"/>
              </td>  
              <td>
                <input type="checkbox" class="g3"/>
                <input type="checkbox" class="g3"/>
                <input type="checkbox" class="g3"/>
              </td>  
            </tr>

        </table>

the script: Jquery

$(function(){
    $(".group").click(function(){
    var click = $(this).attr('chk');
    var current = $("."+click).attr('checked');
    if(current){
            $("."+click).removeAttr('checked');
    }else{
        $("."+click).attr('checked','checked');
    }
  })
})

check this out real simulation