Add active class to matching label of a checkbox

user_3617110 0
Viewed 701

I am trying to add an active class on to the matching label of a checkbox input that is outside of the parent ul.

I have some labels set up that are acting as buttons that have a for="" value that matches the ID of the checkbox, so when they're clicked they check the matching input, this is fine but what I would like to do is have a script that when the checkbox is checked or has an active class on it to add an active class to it's matching label in the .labelBtns section.

So far I've wrote some jQuery that console logs the id for the checkbox and the for for the matching label but I am struggling to connect the logic together to achieve what I want, so any help would be awesome.

$('.m-label-inline').filter('.selected').each(function(i) {
  var idValue = $(this).find('input').attr('id');
  console.log(idValue);
  $('.sizeLabel').each(function() {
    var idValue2 = $(this).attr('for');
    console.log(idValue2);
  });
});
html {
  box-sizing: border-box;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  margin: 0 auto;
  max-width: 50rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-refinement {
  display: flex;
  flex-wrap: wrap;
}

.m-label-inline {
  background: #f8f8f8;
  border: 0.1rem solid #ddd;
  flex-basis: calc(50% - 1rem);
  margin-right: 2rem;
  margin-top: 2rem;
  max-width: calc(50% - 1rem);
  padding: 1rem;
}

.m-label-inline:nth-child(even) {
  margin-right: 0;
}

.labelBtns {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -12em;
  margin-left: -2rem;
  margin-top: 2rem;
}

.sizeLabel {
  color: #111;
  cursor: pointer;
  flex-basis: 50%;
  max-width: 50%;
  padding-bottom: 2rem;
  padding-left: 2rem;
  user-select: none;
}

.labelText {
  background: white;
  border: 0.2rem solid #222;
  color: #111;
  display: inline-block;
  padding: 1rem 0.6rem;
  text-align: center;
  width: 100%;
}

.selected {
  background: tomato !important;
}

.selectedLabel .labelText {
  background: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
  <li class="selected swatch-xs m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS" title="Refine by Size: XS">
    <label for="XS">XS</label>
  </li>
  <li class=" swatch-s} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S" title="Currently Refined by Size: S">
    <label for="S">S</label>
  </li>
  <li class="swatch-m} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M" title="Currently Refined by Size: M">
    <label for="M">M</label>
  </li>
  <li class="swatch-l} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="L" name="L" data-value="L" title="Currently Refined by Size: L">
    <label for="L">L</label>
  </li>
  <li class="swatch-xl m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XL" name="XL" data-name="size" data-value="XL" title="Refine by Size: XL">
    <label for="XL">XL</label>
  </li>
  <li class="swatch-2xl m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="2XL" name="2XL" data-name="size" data-value="2XL" title="Refine by Size: 2XL">
    <label for="2XL">2XL</label>
  </li>
</ul>
<section class="labelBtns">
  <label class="sizeLabel" for="XS">
    <span class="labelText">Size: XS</span>
  </label>
  <label class="sizeLabel" for="S">
    <span class="labelText">Size: S</span>
  </label>
  <label class="sizeLabel" for="M">
    <span class="labelText">Size: M</span>
  </label>
  <label class="sizeLabel" for="L">
    <span class="labelText">Size: L</span>
  </label>
  <label class="sizeLabel" for="XL">
    <span class="labelText">Size: XL</span>
  </label>
  <label class="sizeLabel" for="2XL">
    <span class="labelText ">Size: 2XL</span>
  </label>
</section>

html jquery javascript
1 Answers

To achieve this you simply need to hook to the change event of the checkboxes and then set the class on the closest() li, depending on whether the box is checked or not. You can also use the id of the checkbox to find the related label by its for attribute:

Try this:

$(':checkbox').on('change', function() {
  $(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');

Note that the trigger('change') makes the logic run when the page loads to automatically assign the class without you needing to manually put it in to the HTML.

$(':checkbox').on('change', function() {
  $(this).closest('li').add('label[for="' + this.id + '"] span').toggleClass('selected', this.checked);
}).trigger('change');
html {
  box-sizing: border-box;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  margin: 0 auto;
  max-width: 50rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-refinement {
  display: flex;
  flex-wrap: wrap;
}

.m-label-inline {
  background: #f8f8f8;
  border: 0.1rem solid #ddd;
  flex-basis: calc(50% - 1rem);
  margin-right: 2rem;
  margin-top: 2rem;
  max-width: calc(50% - 1rem);
  padding: 1rem;
}

.m-label-inline:nth-child(even) {
  margin-right: 0;
}

.labelBtns {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -12em;
  margin-left: -2rem;
  margin-top: 2rem;
}

.sizeLabel {
  color: #111;
  cursor: pointer;
  flex-basis: 50%;
  max-width: 50%;
  padding-bottom: 2rem;
  padding-left: 2rem;
  user-select: none;
}

.labelText {
  background: white;
  border: 0.2rem solid #222;
  color: #111;
  display: inline-block;
  padding: 1rem 0.6rem;
  text-align: center;
  width: 100%;
}

.selected {
  background: tomato !important;
}

.selectedLabel .labelText {
  background: tomato;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="m-refinement">
  <li class="swatch-xs m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="XS" name="XS" data-name="size" checked="checked" data-value="XS">
    <label for="XS">XS</label>
  </li>
  <li class=" swatch-s} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="S" name="S" data-value="S">
    <label for="S">S</label>
  </li>
  <li class="swatch-m} m-label-inline">
    <input class="js-refinement-link input-checkbox" type="checkbox" id="M" name="M" data-value="M">
    <label for="M">M</label>
  </li>
</ul>
<section class="labelBtns">
  <label class="sizeLabel" for="XS">
    <span class="labelText">Size: XS</span>
  </label>
  <label class="sizeLabel" for="S">
    <span class="labelText">Size: S</span>
  </label>
  <label class="sizeLabel" for="M">
    <span class="labelText">Size: M</span>
  </label>
</section>

user_5194130
Related