Search code examples
javascriptjqueryglyphicons

Change multiple glyphicons with one click

I am using Bootstrap glyphicons as checkboxes for multiple nodes on a folder tree. I need to toggle all glyphicon checkboxes for a given folder (but ONLY THIS folder and ONLY CHECKBOXES) when said folder's checkbox is clicked.

<li data-layerid="Analises" data-grouped="group_Analises" class="parent_li">
  <span title="Collapse this branch"><i class="glyphicon glyphicon-file"></i> Analises</span>
  <i class="glyphicon glyphicon-unchecked" id="group_Analises" data-foldername="group_Analises"></i></li>

<li data-layerid="V%" data-grouped="2014">
  <span><i class="glyphicon glyphicon-file glyphicon-check"></i> V%</span>
  <i class="glyphicon glyphicon-check" id="2014" data-foldername="2014"></i> 
</li>
<li data-layerid="Ca" data-grouped="2014">
  <span><i class="glyphicon glyphicon-file glyphicon-check"></i> Ca</span>
  <i class="glyphicon glyphicon-check" id="2014" data-foldername="2014"></i> 
</li>

If I do this, I change all glyphicons on the page.

$('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

enter image description here

If I attempt to access the id directly, I only manage to change the first element with this id, not all of them:

$('#2014').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

enter image description here

Suggestions VERY welcome.

Solution

  • Try to remove id attribute on DOM, use data-foldername attribute instead.

    $('i[data-foldername="2014"]').removeClass('glyphicon-check').addClass('glyphicon-unchecked');