Jquery - Trying to display div only when relevant checkbox is checked

Tan
July 13, 2023
236 views
3 votes
3 Answers

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>

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Trying to display div only when relevant checkbox is checked

Answers