Trouble selecting a checkbox in a row

help
1

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.

2

nicely formatted code, tldr

3

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

4

Length is not the problem, but that formatting

5

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

6

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

1 Like
7

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

8

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

9

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

10

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.

11

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.