checkbox checking all siblings of nested checkbox inside a td - javascript

please help me how to:
check all the siblings if the checkbox parent is check, and also if some child/children of a checkbox was checked, then the parent also must be checked. How can i do this?
i have this in my laravel code:
<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 }}" /> </td>
<td> {{ $data->user_id }} </td>
<td> {{ $data->total_amount }} </td>
<td> {{ $data->shipping_date }} </td>
<td> {{ $data->shipping_receiver }} </td>
<td> {{ $data->shipping_address }} </td>
<td> {{ $data->mobile_number }} </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 }}" /> </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>
I have my jsfiddle link:
http://jsfiddle.net/jKxNF/112/
I am very confused because i did it in my laravel loop, but the structure of it is in the jsfiddle.


I would add an attribute to the triggering checkboxes such as
<input type="checkbox" data-target=".prefix-{{ $data->shipping_id }}">
and using a class on the targeted <td>
<td class="prefix-{{ $data->shipping_id }}"><input type="checkbox">Sample3</td>
The following Javascript will select the relevant checkboxes
$(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)
}
});
The data attribute value should be a selector, either #prefix-{{ $data->shipping_id }} if you use an ID or .prefix-{{ $data->shipping_id }} if you use a class

Related

Select All Check Boxes By group

first group : Agen LPG 3KG
second group : Office HRG
I want to select a checkbox based on the group, but at this time when I click on group one then group two should be selected when I click on group one then group one is checked, why is it selected only in the last loop?
my code in index.blade.php
#foreach ($business_unit as $group => $unit)
<tr>
<td colspan='5' style='font-weight: bold'>{{ $group }} #if ($group == '') Unit Bisnis Lainnya #endif</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="{{$group}}" onclick="toggle(this);"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
#foreach ($unit as $item)
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check" id="{{$group}}" name="employee_id[]" value="{{ $item->employee_id }}">
<td class='captial'>{{ $item->name }}</td>
<td class='captial'>{{ $item->position ?? '-' }}</td>
</tr>
#endforeach
#endforeach
Here is the javascript for this
<script>
function toggle(source) {
var business_id = $(this).data('business-id');
var checkboxes = document.querySelectorAll('input[id="{{$group}}"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
</script>
how to solve my problem please help me.

You only have ONE input[id="{{$group}}" so it will only ever do that one.
Instead delegate (and remove onclick="toggle(this);") and use the data attributes you already have:
I assume the table has id="tableID" and you need to change the checkbox to class="emp-check {{$group}}"
document.getElementById("tableID").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches("[data-business-id]")) return // or use a class
const business_id = tgt.dataset.businessId; // the business-id becomes businessId
const checked = tgt.checked;
document.querySelectorAll(`input.${business_id}`).forEach(chk => chk.checked = checked)
})
<table id="tableID">
<tr>
<td colspan='5' style='font-weight: bold'>group 1</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group1"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 1">
<td class='captial'>G1 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 2">
<td class='captial'>G1 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 3">
<td class='captial'>G1 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
<tr>
<td colspan='5' style='font-weight: bold'>group 2</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group2"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 1">
<td class='captial'>G2 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 2">
<td class='captial'>G2 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 3">
<td class='captial'>G2 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
</table>

How to remove current tr row in table using vuejs

I am using partially VueJS in Laravel.
In blade:
#foreach ($mileagelogv2 as $mileage)
<tr>
<td>#if(isset(json_decode($mileage->data)->driver_name) && !empty(json_decode($mileage->data)->driver_name))
{{json_decode($mileage->data)->driver_name}}
#else
--
#endif
</td>
<td>#if(isset(json_decode($mileage->data)->date) && !empty(json_decode($mileage->data)->date))
{{json_decode($mileage->data)->date}}
#else
--
#endif
</td>
<td>{{\Carbon\carbon::parse($mileage->created_at)->format('d/m/Y H:i:s')}}</td>
<td>{{$mileage->createdBy->name}}</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
"
#click="updateMileageLogV2({{$mileage->id}}, $event)"
>
Complete
</a>
</td>
</tr>
#endforeach
Rendered Output:
<table class="mileagelogv2_panel">
<thead>
<tr>
<th>Driver Name</th>
<th>Date</th>
<th>Created At</th>
<th>Created By</th>
<th>Action</th>
</tr>
</thead>
<tbody class="mileagelogv2_panel">
<tr>
<td> Testing 2 u
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:49</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing 2
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:08</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:25:28</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
</tbody>
</table>
In js file:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
var $this = this;
$this.remove();
}
My question is:
When I click on Complete button then the corresponding row should delete.
But unfortunately it is not working.

Finally, I have found solution.
I write this line in VueJs method:
event.path[2].remove();
In VueJs Method:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
event.path[2].remove();// remove current tr row on click.
}
Explanation:
See in screenshot, event.path has array of DOM list.
At 0 index a tag
At 1 index td tag
AT 2 index tr tag

rowspan for 3 columns using angularJS

I have a category list that contains name and subject list.
The subject list contains name and course list.
The course list contain name.
I want to display this data in table that will rowspan category or subject if they are the same. For example:
Category Subject Course
cat1 sub1 ''
sub2 cour1
cour2
sub3 ''
cat3 ''
Currently I have it working for two columns using this:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.name }}</td>
</tr>
</tbody>
</table>
However, I am having trouble doing it for 3 columns. This is the code I have that is not working. The course name are not being displayed and subject name become listed in column order instead of row order. Any suggestion:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td rowspan="{{subject.courseList.length+1}}">{{ subject.name }}</td>
<tr ng-repeat="course in subject.courseList">
<td>{{ course.name }}</td>
</tr>
</tr>
</tbody>
</table>
Sample Data:
[
{"id":95,"categoryName":"A new catagory",
"subjectList":[{"id":112,"subjectname":"2ndnewcat","curcount":0,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"},
{"id":76,"subjectname":"ZZZZZZZZZZZZZZZZZZ_class","curcount":0,
"courseList":[{"coursename":"thiswillbenew111111111112","curcount":1}]}]},
{"id":93,"categoryName":"David Test",
"subjectList":[{"id":75,"subjectname":"This is a test","curcount":1,
"courseList":[{"coursename":"newewst1","curcount":0}]}]},
{"id":116,"categoryName":"New Category",
"subjectList":[{"id":79,"subjectname":"New Subject","curcount":2,
"courseList":[{"coursename":"ISO training part 2","curcount":0}]}]},
{"id":0,"categoryName":"cat1",
"subjectList":[{"id":15,"subjectname":"test","curcount":4,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"}]},
{"id":11,"categoryName":"cat2",
"subjectList":[{"id":68,"subjectname":"asdasd","curcount":5,
"courseList":[{"coursename":"david1","curcount":0},{"coursename":"thisisatest","curcount":0}]}]},
{"id":12,"categoryName":"cate3",
"subjectList":[{"id":12,"subjectname":"newest1","curcount":6,
"courseList":[{"coursename":"cous1","curcount":0}]}]},
{"id":163,"categoryName":"emptylist",
"subjectList":"[{\"name\":\"-\",\"curcount\":0}]"}
]
This is current code I am testing. It will will rowspan the category, display each subject once and then display all the courses for each subject in list in a single cell. I would prefer to rowspan subject too, but this is what I got working so far.
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.subjectname }}</td>
<td> <li ng-repeat="course in subject.courseList" >{{ course.coursename }} </li></td>
</tr>
<td ng-if="category.subjectList.length==27"> </td>
<td ng-if="category.subjectList.length==27"> </td>
</tbody>
</table>
Thanks,
AB

The two column case should be:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
{{subj.name}}
</td>
</tr>
</tbody>
For the three column case, nest a <table> in the <td> element:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
<table>
<tr ng-repeat="class in subj.classList">
<td rowspan="subj.classList.length+1">
{{subj.name}}
</td>
<td>
{{class.name}}
</td>
</tr>
</table>
</td>
</tr>
</tbody>

adding extra html tags within angularjs loop

I need to add extra HTML tags within an angularjs loop like so:
<div ng-repeat="fixture in fixtures.fixtures ">
<tr>
<th class="date" colspan="5">{{fixture.date | cmdate:'MM/dd/yyyy'}}</th>
</tr>
<tr>
<td>{{teamName(fixture.homeTeam) }}</td>
<td> {{score(fixture.goalsHomeTeam)}}</td>
<td>-</td>
<td>{{score(fixture.goalsAwayTeam)}} </td>
<td>{{teamName(fixture.awayTeam)}}</td>
</tr>
</div>
however no data is retrieved when I do that, if I have it coded as follows it does work:
<tr ng-repeat="fixture in fixtures.fixtures ">
<td>{{fixture.date | cmdate:'MM/dd/yyyy'}}</td>
<td>{{teamName(fixture.homeTeam) }}</td>
<td> {{score(fixture.goalsHomeTeam)}}</td>
<td>-</td>
<td>{{score(fixture.goalsAwayTeam)}} </td>
<td>{{teamName(fixture.awayTeam)}}</td>
</tr>
what would be the problem?

Validate row with inputs in a table that has been built dynamically in AngularJS

I've been struggling on the solution to the following problem.
I have a table in which every row is build dynamically by ngRepeat.
Every row has four columns and in every column there is an input element.
My question is - how can I validate these four input fields and show the row in red if at least one of this four inputs is invalid.
I've tried to accomplish it with the help of this answer - AngularJS dynamic form field validation. But maybe because I'm doing something wrong it didn't help
<form novalidate name="feedInputSpecificForm" ng-submit="save()">
<table class="table table-condensed cf-table">
<thead>
<tr>
<th class="text-center">{{ 'Feed input' | translate }}</th>
<th class="text-center">{{ 'Calcium' | translate }}</th>
<th class="text-center">{{ '(g/Kg)' | translate }}</th>
<th class="text-center">{{ 'DM/FM factor' | translate }}</th>
</tr>
</thead>
<tbody>
<tr ng-class="{'danger': feedInputSpecificForm.$invalid}"
ng-repeat="item in items">
<td width="20%" class="text-right">
<input ng-model="item.name" type="text" dynamic-name="{{ 'name_' + $index }}" required/>
</td>
<td width="30%" class="text-center">
<input ng-model="item.calcium" type="text" ng-pattern="/^[\d,\.]+$/i" dynamic-name="{{ 'ca_' + $index }}"
class="form-control" required/>
</td>
<td width="20%" class="text-center">
<select ng-model="item.ca_dm" class="form-control input-sm" dynamic-name="{{ 'ca_dm_' + $index }}" required>
<option value="dm">DM</option>
<option value="fm">FM</option>
</select>
</td>
<td width="30%" class="text-center">
<input ng-model="item.dm_fm_factor" type="text" ng-pattern="/^[\d,\.]+$/i"
dynamic-name="{{ 'dm_fm_factor_' + $index }}" class="form-control" required/>
</td>
</tr>
</tbody>
<tfoot class="feed-inputs-control">
<tr ng-if="type === 'specific'">
<td colspan="2" width="50%">
<button ng-click="onAdd()" type="button" class="btn btn-primary btn-sm">Add new feed</button>
</td>
<td colspan="2" width="50%">
<button type="submit" class="btn btn-primary btn-sm">Save</button>
</td>
</tr>
</tfoot>
</table>
</form>

I've found the answer and it was very simple.
Everything worked after me added ng-form in the "tr" tag there I was doing ng-repeat:
<tr ng-class="{'danger': item.id.$invalid}"
ng-repeat="item in items" ng-form="item.id">...</tr>

Categories

Resources