skip to Main Content

The goal of the code is to display only relevant divs when a checkbox is checked. I added on div for Mark as a full check box. So if I check the mark as full, it will show and if I uncheck it, it won’t show. However, if I check other checkboxes, it will remain on the screen. So I was wondering if there’s a way to hide it once other checkboxes are working. In my actual code, I have some divs showing for all the checkboxes so I want to show divs only when it’s checked and hide the div once its corresponding checkbox is unchecked.

let boxes = document.querySelectorAll("input[type=checkbox]");
boxes.forEach(b => b.addEventListener("change", tick));
function tick(e) {
  let state = e.target.checked; // save state of changed checkbox
  console.log(state);
  boxes.forEach(b => b.checked = false); // clear all checkboxes
  e.target.checked = state; // restore state of changed checkbox
}

$("#markAsFullChange").hide();


$("[name='markAsFull']").click(function() {
  if($(this).is(":checked")) {

  $("#markAsFullChange").show();
  } else {
  $("#markAsFullChange").hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm" action="" method="POST">
  <p>Select one of the checkboxes:</p>
  <label><input name="changeLocation" type="checkbox">Change Location</label>
  <label><input name="updateLocation" type="checkbox">Update Location</label>
  <label><input name="retireLocation" type="checkbox">Retire</label>
  <label><input name="markAsFull" type="checkbox">Mark as full</label>
  <label><input name="moveContents" type="checkbox">Move Contents</label>
  
 <div id="markAsFullChange">
   <div>
      <label>Select a location to mark as full:</label>
   </div>
   <div>
      <label>I have a dropdown list here in actual code</label>
   </div>
</div> 
</form>

3

Answers


  1. You can first hide all the associated div elements before showing the appropriate one.

    let boxes=document.querySelectorAll("input[type=checkbox]");function tick(e){let c=e.target.checked;boxes.forEach(e=>e.checked=!1),e.target.checked=c}boxes.forEach(e=>e.addEventListener("change",tick));
    
    const checkboxes = $('#testForm input[type=checkbox]');
    const associated = checkboxes.map((i, el) => document.querySelector(`#${el.name}Change`)).hide();
    checkboxes.change(function(e) {
      associated.hide();
      $(`#${this.name}Change`).toggle(this.checked);
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form id="testForm" action="" method="POST">
      <p>Select one of the checkboxes:</p>
      <label><input name="changeLocation" type="checkbox">Change Location</label>
      <label><input name="updateLocation" type="checkbox">Update Location</label>
      <label><input name="retireLocation" type="checkbox">Retire</label>
      <label><input name="markAsFull" type="checkbox">Mark as full</label>
      <label><input name="moveContents" type="checkbox">Move Contents</label>
    
      <div id="markAsFullChange">
        <div>
          <label>Select a location to mark as full:</label>
        </div>
        <div>
          <label>I have a dropdown list here in actual code</label>
        </div>
      </div>
    </form>
    Login or Signup to reply.
  2. The issue was because the function to show/hide the markAsFullChange div only is binded to one click handler, the one for markAsFull checkbox. Other checkboxes do not fire the function.

    Side note #1, unless you are doing some complex DOM traversing or using jQuery’s effects… Go for plain JS.
    Else, it is like using a SUV to go from the front yard to the back yard.

    Side note #2, you are using checkboxes like the radio behaves natively… Using radios would spare you a function.
    Less code is less debugging.

    Here is a no jQuery solution.

    const checkboxes = Array.from(document.querySelectorAll("input[type='checkbox']"))
    const markAsFullChange = document.querySelector("#markAsFullChange")
    
    const resetOtherCheckboxes = (current) => checkboxes.forEach((checkbox) => {
      if( checkbox !== current){
        checkbox.checked = false  // Uncheck others
      }
    })
    
    const onChangeCheckbox = (event) => {
      const target = event.target
      resetOtherCheckboxes(target)
      // Display the div only if the checkbox is checked and is markAsFull
      markAsFullChange.style.display = target.checked && target.name === "markAsFull" ? "block" : "none"
    }
    
    checkboxes.forEach((checkbox) => checkbox.addEventListener("change", onChangeCheckbox))
    #markAsFullChange{
      display: none;
    }
    <form id="testForm" action="" method="POST">
      <p>Select one of the checkboxes:</p>
      <label><input name="changeLocation" type="checkbox">Change Location</label>
      <label><input name="updateLocation" type="checkbox">Update Location</label>
      <label><input name="retireLocation" type="checkbox">Retire</label>
      <label><input name="markAsFull" type="checkbox">Mark as full</label>
      <label><input name="moveContents" type="checkbox">Move Contents</label>
    
      <div id="markAsFullChange">
        <div>
          <label>Select a location to mark as full:</label>
        </div>
        <div>
          <label>I have a dropdown list here in actual code</label>
        </div>
      </div>
    </form>
    Login or Signup to reply.
  3. you can only use css for that and only radio instead

    body {
      background:#EEE;
    }
    
    .tabs section {
      display: none;
      padding: 20px 0 0;
      border:none
    }
    
    .tabs input {
      display: none;
    }
    
    .tabs label {
      display: inline-block;
      margin: 0 10px 0 0;
      padding: 5px 10px;
      font-weight: 600;
      text-align: center;
      color: #000;
      background:#FFF;
      border: none;
    }
    
    .tabs label:before {
      font-family: fontawesome;
      font-weight: normal;
      margin-right: 10px;
    }
    
    
    .tabs label:hover {
      color: #888;
      cursor: pointer;
    }
    
    .tabs input:checked + label {
      color: #555;
      background: rgb(205, 215, 226);
      border: none;
    }
    
    .tabs #tab1:checked ~ #content1,
    .tabs #tab2:checked ~ #content2,
    .tabs #tab3:checked ~ #content3,
    .tabs #tab4:checked ~ #content4 {
      display: block;
    }
    <div class="tabs">
      
      <input id="tab1" type="radio" name="tabsA" checked>
      <label for="tab1">Produktbeschreibung</label>
        
      <input id="tab2" type="radio" name="tabsA">
      <label for="tab2">Material</label>
        
      <input id="tab3" type="radio" name="tabsA">
      <label for="tab3">Abmessungen</label>
    
          
      <section id="content1">
          Beschreibung
        <p>
          Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
        </p>
        <p>
          Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
        </p>
      </section>
        
      <section id="content2">
      </section>
        
      <section id="content3">
        Abmessungen
        <p>
          Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
        </p>
        <p>
          Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
        </p>
      </section>
      
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search