Hi everybody!
I’ve a trouble when I trying select a checkbox of a row in a table (HTML table). Sometimes when I select (deselect this checkbox, in fact), one by one, at reach the third, the first input is selected again:
CSS
table tr input:not(old){
width: 2em;
margin: 0;
padding: 0;
font-size: 1em;
opacity: 0;
}
table tr input:not(old) + label{
display: inline-block;
margin-left: -2em;
line-height: 1.5em;
}
table tr input:not(old) + label > span{
background: rgb(224,224,224);
background-image: -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image: linear-gradient(rgb(240,240,240),rgb(224,224,224));
border: 0.0625em solid rgb(192,192,192);
border-radius: 0.25em;
display: inline-block;
height: 1em;
margin: 0.20em 0.20em 0.20em 0.20em;
vertical-align: bottom;
width: 0.875em;
}
table tr input:not(old):checked + label > span:before{
background-color: rgb(210, 228, 192);
border-radius: 0.20em;
color: rgb(255, 255, 255);
content: '✓';
display: block;
font-size: 0.875em;
font-weight: bold;
line-height: 1.15em;
text-align: center;
text-shadow: 0 0 0.0714em rgb(115,153,77);
}
HTML
<template name="productsTable">
<div class="table">
<table>
<thead>
<tr id="theadRow">
<th scope="col" id="Checkbox"><input id="selectAll" type="checkbox"/>
<label for="selectAll"><span></span></label>
</th>
[Other elements th]
</tr>
</thead>
<tbody>
{{#each product}}
{{>productValues}}
{{/each}}
</tbody>
</table>
</div>
</template>
<template name="productValues">
<tr class="not-selected-row">
<td abbr="checkbox for select current row" scope="row" headers="Checkbox" data-title="Select me">
<input type="checkbox" id="checkboxForInput"/>
<label for="checkboxForInput"><span></span></label>
</td>
[Oter elemets td]
</tr>
</template>
JS
var rowSelected = function(template){
//To click on the row change the class
var $checked = template.$('tr input').prop('checked');
var $selectAll = $('#selectAll').prop('checked');
var $template = template.view.name;
var $templateName = $template.slice($template.indexOf('.')+1, $template.length);
if(template.$('tr').hasClass('not-selected-row')){
//Change the class for selected row
if(!$templateName.localeCompare('productValues')){
//Called from productValues Template
template.$('tr').removeClass('not-selected-row').addClass('selected-row');
}else{
//Called from productsTable Template
template.$('tbody tr').removeClass('not-selected-row').addClass('selected-row');
}
if(!$checked){
template.$('tr input').prop('checked', true);
}
}else{
//Change the class for no selected row
if(!$templateName.localeCompare('productValues')){
//Called from productValues Template
template.$('tr').removeClass('selected-row').addClass('not-selected-row');
if($selectAll){
template.$('#selectAll').prop('checked', false);
}
}else{
//Called from productsTable Template
template.$('tbody tr').removeClass('selected-row').addClass('not-selected-row');
}
if($checked){
template.$('tr input').prop('checked', false);
}
}
if(!$templateName.localeCompare('productValues') && $selectAll){
$('#selectAll').prop('checked', false);
}
};
//------- Product Table -------//
Template.productsTable.helpers({
product: productsData
});
Template.productsTable.events({
'click #selectAll': function(event, template){
var $selectAll = $('#selectAll').prop('checked');
if($selectAll){
template.$('tbody tr input').prop('checked', true);
}else{
template.$('tbody tr input').prop('checked', false);
}
rowSelected(template);
}
});
//----- End Product Table -----//
//----- Product Values -----//
Template.productValues.events({
/* @event: for events called
@template: for manipulate the DOM of temeplate
*/
'click tr': function(event, template){
var $countSelected = 0;
rowSelected(template);
$('tbody input:checkbox:checked').each(function(){
//Count selected input
if($(this).val()){
$countSelected++;
}
});
if($('tbody tr').length===$countSelected){
//If all input are selected change value input selectAll
$('#selectAll').prop('checked', true);
}else{
//In other case don't
$('#selectAll').prop('checked', false);
}
}
});
//----- End Product Values -----//
Thanks and best regards.