Javascript 复选框检查td中嵌套复选框的所有同级

Javascript 复选框检查td中嵌套复选框的所有同级,javascript,jquery,checkbox,laravel-5.4,Javascript,Jquery,Checkbox,Laravel 5.4,请帮助我如何: 如果复选框父项已选中,请选中所有同级,如果复选框的某些子项已选中,则还必须选中父项。我该怎么做 我的laravel代码中有: <table class="table table-hover" id="tableOrders"> <thead class="thead-inverse"> <tr>

请帮助我如何: 如果复选框父项已选中,请选中所有同级,如果复选框的某些子项已选中,则还必须选中父项。我该怎么做

我的laravel代码中有:

<table class="table table-hover" id="tableOrders">                                    
    <thead class="thead-inverse">                        
        <tr>
          <th width="4%"><input type="checkbox" id="selectAll" /></th>
          <th width="7%">USER ID</th>
          <th width="12%">AMOUNT</th>
          <th width="15%">SHIP DATE</th>
          <th width="15%">RECEIVER</th>
          <th width="20%">ADDRESS</th>
          <th width="14%">MOBILE #</th>
        </tr>
    </thead>                        
    <tbody>
         <?php $i=0 ?>                             
         @foreach($shippings as $data)                             
        <tr>

            <td><input type="checkbox" class="parent" name="shippings[][]" value="{{ $data->shipping_id }}" />&nbsp;</td>                                
            <td><a href="#" data-value="{{ $data->user_id }}" class="linkedit"> {{ $data->user_id }} </a></td>
            <td><a href="#" data-value="{{ $data->total_amount }}" class="linkedit"> {{ $data->total_amount }} </a></td>
            <td><a href="#" data-value="{{ $data->shipping_date }}" class="linkedit"> {{ $data->shipping_date }} </a></td>
            <td><a href="#" data-value="{{ $data->shipping_receiver }}" class="linkedit"> {{ $data->shipping_receiver }} </a></td>
            <td><a href="#" data-value="{{ $data->shipping_address }}" class="linkedit"> {{ $data->shipping_address }} </a></td>   
            <td><a href="#" data-value="{{ $data->mobile_number }}" class="linkedit"> {{ $data->mobile_number }} </a></td>                                
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><p style="font-weight:bold;">Product Name</p></td>
            <td><p style="font-weight:bold;">Price</p></td>
            <td><p style="font-weight:bold;">Ordered Qty</p></td>
            <td><p style="color:red;font-weight: bold;">Available Qty</p></td>
        </tr>                              
          @foreach($data->products as $product)

                <tr>
                  <td></td>
                  <td><input type="checkbox" class="child" name="shippings[{{$i}}][products][]" value="{{ $product->product_id }}" />&nbsp;</td>                
                  <td>{{ $product->product_name }}</td>
                  <td>{{ $product->price }}</td>                              
                  <td>{{ $product->quantity }}</td>
                  <td><p style="color:red;"> {{ $product->available_qty }}</p></td>                                      
                </tr>                              
          @endforeach                        
          <?php $i++; ?>                            
        @endforeach
    </tbody>
</table>
我有我的JSFIDLE链接:


我非常困惑,因为我是在我的laravel循环中完成的,但它的结构在JSFIDLE中。

我会在触发复选框中添加一个属性,例如

<input type="checkbox"  data-target=".prefix-{{ $data->shipping_id }}">

数据属性值应该是一个选择器,如果使用id,则前缀为{{$data->shipping_id},如果使用类,则前缀为{{$data->shipping_id},如何说它是同级的?每行还是每td?@guradio每td。感谢您的回复,sample1何时为check sample2,sample3何时为check?@guradio抱歉,我更新了我的JSFIDLE链接。。请检查本例中的父项是什么,john,jacob?我将按照以下数据目标={{{$data->shipping_id}}。我可以做一个电话吗?
<td class="prefix-{{ $data->shipping_id }}"><input type="checkbox">Sample3</td>
$(document).on('change', 'input[type="checkbox"]', function(e) {
    var checked = $(this).prop('checked')
    var target = $(this).data('target')

    if(checked){
        $(target).find('input').prop('checked', true)
    } else {
        $(target).find('input').prop('checked', false)
    }
});