Trouble selecting a checkbox in a row

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.

nicely formatted code, tldr

Yes, it’s too long. I’ll edit only with the CSS that where the problems lies (I think).

Length is not the problem, but that formatting

Ok, Is there any guide for apply a correct format?. I didn’t find it.

I use Markdown, so I put 3x char ‘`’ before and after code.

1 Like

Do it, thanks for your explanation. I didn’t know this markup language.

Nobody can help me?. I don’t know how fix it.

well, u removed whole selecting logic etc… it is hard to comment something what is not there

Hi,

Thanks for your feedback. Concerning logical selectors I need some for make the label with checkbox style. I think to I can change the logical selector for control the checkboxs selected and create a class for add by javascript when the user click on them.

I have added the HTML code by if It help to clarify the situation.

Thaks and best regards.

Hi,

I removed the selecting logic but the error appear again. Even I added a style class in JQuery but the error persist so I’ve let the code as at beginning.

Thanks and best regards.