CODEWITHSUNDEEP
javascriptjquerycss
NeedH8
NeedH8

Reputation: 482

How to add class for two labels with the same "for" attribute?

I have something like accordion with left side labels navigation, and inner (inside accord section) labels like "next/prev". So the question how to check if there are two the same labels with attr "for" and add class to them? 

input {
display: none;
}

input:checked + label {
color: red;
}

input + section {
display: none
}

input:checked + section {
display: block
}

label {
display: inline-block;
  border: 1px solid green;
  padding: 10px;
}
<label for="check">Label #1</label>
<label for="check2">Label #2</label>
<label for="check3">Label #3</label>
<label for="check4">Label #4</label>

<div>
<input type="radio" name="test" id="check"> 
<section>
Lorem ipsum dolor sit amet, vitae graeci vidisse et his, et vis quod appetere vulputate, eius verear habemus usu ne. Et usu senserit mediocrem imperdiet, habeo fugit paulo mel at. Velit minimum te qui. Sed te pertinacia eloquentiam, ad modus ponderum luptatum vel, vidisse accommodare id sit
<div><label for="check2">Next #2</label></div>
</section>
  
  <input type="radio" name="test" id="check2"> 
<section>
Lorem ipsum dolor sit amet, vitae graeci vidisse et his, et vis quod appetere vulputate, eius verear habemus usu ne. Et usu senserit mediocrem imperdiet, habeo fugit paulo mel at. Velit minimum te qui. Sed te pertinacia eloquentiam, ad modus ponderum luptatum vel, vidisse accommodare id sit

  <div><label for="check">Prev #1</label>
  <label for="check3">Next #3</label>
    </div>
</section>
  
  <input type="radio" name="test" id="check3"> 
<section>
Mel no erat platonem. Ius ad veritus minimum molestiae, ea blandit adolescens vix. Impetus epicuri ocurreret usu in, id aeterno fastidii molestiae his. Eruditi nonumes vel cu, has feugait ancillae efficiendi ex, cu vel augue tacimates. Augue mnesarchum et mei.

  <div><label for="check3">Prev #3</label> <label for="check4">Next #4</label></div>
</section>
  
  <input type="radio" name="test" id="check4"> 
<section>
Odio facilisis persequeris eu sed, in sea oblique labores. Ei vel utamur menandri, paulo omnium delectus vix id. Pri choro impetus persecuti eu. Est id illud luptatum dissentiunt. Vim id nemore aliquip, sea eligendi deseruisse ea. Quot elitr et has, deleniti oportere et nec, an molestiae adipiscing eos.
<div><label for="check3">Prev #3</label><label for="check">Next #1</label></div>
</section>



</div>

Upvotes: 1

Views: 114

Answers (1)

Alexander Belokon
Alexander Belokon

Reputation: 1522

Simply select all labels with the same input id and add your class:

var id = "check",
    label = $('label[for="' + id + '"]');

label.addClass('your-class');

This will help you:

$('.btn-lbl').click(function() {
    var id = $(this).attr('for');
    $('.how-it-works--label[for="' + id + '"]').addClass('active');
});

Upvotes: 2

Related Questions