Removed contents

back edit

Toggle a required field by checking/unchecking the checkbox.

<form>
  <label class="d-block"><input type="checkbox" class="js-require-address"> Send me a paper report</label>
  <div class="js-address-field has-removed-contents">
    <label class="d-block mt-2" for="address">Address</label>
    <input name="address" id="address" class="form-control" required>
  </div>
  <button type="submit" class="btn d-block mt-2">Submit</button>
</form>
const checkbox = document.querySelector('.js-require-address')
const addressField = document.querySelector('.js-address-field')
checkbox.addEventListener('change', function(event) {
  addressField.classList.toggle('has-removed-contents', !checkbox.checked)
})