Question 289789 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Change class of parent div based on attribute of label

If the label element contains ‘false’ is it possible to change the class of the parent div? And only from the one?

<div class="myclass">
  <input type="checkbox" name="water-list" value="school-1" case="registered" id="school-1" class="CheckBox">
  <label for="true">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-2" case="registered" id="school-2" class="CheckBox">
  <label for="true">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-3" case="registered" id="school-3" class="CheckBox">
  <label for="false">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-4" case="registered" id="school-4" class="CheckBox">
  <label for="true">bla</label>
</div>
Tags:

2

Answers


  1. 0

    Yes, it is possible to achieve this using JavaScript. You can add an event listener to each checkbox, and when the checkbox is clicked, check the value of the associated label. If the value is "false," you can then change the class of the parent div.

    <div class="myclass">
  <input type="checkbox" name="water-list" value="school-1" case="registered" id="school-1" class="CheckBox">
  <label for="true">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-2" case="registered" id="school-2" class="CheckBox">
  <label for="true">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-3" case="registered" id="school-3" class="CheckBox">
  <label for="false">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-4" case="registered" id="school-4" class="CheckBox">
  <label for="true">bla</label>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var checkboxes = document.querySelectorAll('.CheckBox');

    checkboxes.forEach(function(checkbox) {
      checkbox.addEventListener('click', function() {
        var label = this.parentElement.querySelector('label');
        var parentDiv = this.parentElement;

        if (label.getAttribute('for') === 'false') {
          parentDiv.classList.toggle('highlight');
        }
      });
    });
  });
</script>
    Login or Signup to reply.
  2. 0

    First you should use a data attribute for your false value. (for is used specifically to associate a label with a corresponding form control element (like input.) I’ve used data-check here.

    Then it depends whether one label will only ever be checked false or whether you might have n number of labels checked false.

    One label checked false

    // Find the false label
const label = document.querySelector('.myclass label[data-check="false"]');

// Find the closest ancestor div and change the class
label.closest('div').className = 'newclass';
    .myclass {
  background-color: lightgray;
}

.newclass {
  background-color: lightgreen;
}
    <div class="myclass">
  <input type="checkbox" name="water-list" value="school-1" case="registered" id="school-1" class="CheckBox">
  <label data-check="true">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-2" case="registered" id="school-2" class="CheckBox">
  <label data-check="true">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-3" case="registered" id="school-3" class="CheckBox">
  <label data-check="false">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-4" case="registered" id="school-4" class="CheckBox">
  <label data-check="true">bla</label>
</div>

    More than one label checked false

    // Select the divs
const divs = document.querySelectorAll('.myclass');

// Iterate over them. If the corresponding label for a div
// has its check data attribute set to false change the class
// of the div
divs.forEach(div => {
  if (div.querySelector('label').dataset.check === 'false') {
    div.className = 'newclass';
  }
});
    .myclass {
  background-color: lightgray;
}

.newclass {
  background-color: lightgreen;
}
    <div class="myclass">
  <input type="checkbox" name="water-list" value="school-1" case="registered" id="school-1" class="CheckBox">
  <label data-check="false">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-2" case="registered" id="school-2" class="CheckBox">
  <label data-check="true">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-3" case="registered" id="school-3" class="CheckBox">
  <label data-check="false">bla</label>
</div>
<div class="myclass">
  <input type="checkbox" name="water-list" value="school-4" case="registered" id="school-4" class="CheckBox">
  <label data-check="true">bla</label>
</div>

    Additional documentation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search