Добавить класс и удалить при повторном клике

231

11 мая 2018, 10:02

<div class="checkbox_block_row">
    <div class="checkbox">
     11
    </div>
    <div class="checkbox">
       22
    </div>
    <div class="checkbox">
       33
    </div>
</div>

Нужно, чтобы при клике на checkbox добавлялся класс checkbox_active, при этом, если я кликну следующий checkbox нужно чтобы с предыдущего не удалился класс, а при повторном клике на элемент с него удалился класс checkbox_active

Answer 1

Можно через делегирование и скрипт будет намного быстрее работать:

$( ".checkbox_block_row" ).on( "click", ".checkbox" , function() { 
  $( this ).toggleClass( "checkbox_active" ); 
});

.checkbox { 
    color: red; 
    user-select: none; 
    cursor: pointer; 
} 
 
.checkbox_active { 
    color: green !important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="checkbox_block_row"> 
        <div class="checkbox"> 
           11 
       </div> 
        <div class="checkbox"> 
           22 
        </div> 
        <div class="checkbox"> 
           33 
        </div> 
 </div>

Answer 2

$('.checkbox_block_row .checkbox').on('click', function(event){ 
  $(this).toggleClass('active'); 
});

.active { 
color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="checkbox_block_row"> 
    <div class="checkbox"> 
     11 
    </div> 
    <div class="checkbox"> 
       22 
    </div> 
    <div class="checkbox"> 
       33 
    </div> 
</div>