Question 52190 in Javascript Question posted in
A very good W3school tutorial can be found here.

Filtering with RadioButton – Javascript

I’m making a mockup website the problem is I’m trying to filter my content using radiobuttons woth each has iets own value (manga,manwha) and the content has class tags with different values (manga,manwha) now I tried a few things in JavaScript but it only takes away the content when the radiobtn is checked but it need to do the opposite by only showing the contwnt that is checked

The code that a use is the following but with my own things added

function filterItems() {
  // Get the selected radio button value
  var selectedValue = document.querySelector('input[name="checkbox3"]:checked').value;

  // Get all list items
  var items = document.querySelectorAll('#manga, #manwga');

  // Loop through each item and show/hide based on the selected radio button
  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    if (item.getAttribute('data-type') === selectedValue || selectedValue === 'all') {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  }
}
Tags:

3

Answers


  1. 0

    If your problem is that your code is hiding the content corresponding radioButton, you just have to make it so it hides all content NOT corresponding to the radioButton. To do that, you only have to invert what the if is doing from

      if (item.getAttribute('data-type') === selectedValue || selectedValue === 'all') {
      item.style.display = 'block';
  } else {
      item.style.display = 'none';
  }

    to

      if (item.getAttribute('data-type') === selectedValue || selectedValue === 'all') {
      item.style.display = 'none';
  } else {
      item.style.display = 'block';
  }
    Login or Signup to reply.
  2. 0

    If you need to invert the behavior you can change if block like this, and also you can to get rid of the else block.

    you actually don’t need this one var item = items[i]; in the loop – it’s just memory spending.

    and a body of the loop will become so:

    items[i].style.display = 'none';
if (
      items[i].getAttribute('data-type') !== selectedValue 
      && selectedValue !== 'all'
) {
      items[i].style.display = 'block';
}

    also let’s use dataset attribute correctly – dataset.type

    items[i].style.display = 'none';
if (
      items[i].dataset.type !== selectedValue 
      && selectedValue !== 'all'
) {
      items[i].style.display = 'block';
}
    Login or Signup to reply.
  3. 0

    Below is an example that collects all the values from the checked inputs and puts them in an array on every change. It then loops over the elements you want to show or hide and checks for each element if the data type value corresponds with one of the values of the checked inputs.

    Hide your elements by default and only show them by adding a class.

    const contentTypes = document.querySelectorAll('.content-type');
const form = document.querySelector('form');

/**
 * This captures every "change" event that bubbles up.
 * So every input that has a changed value, like when you select or unselect it, will trigger the event listener.
 */
form.addEventListener('change', event => {
  // Get all the values of the checked inputs from the form.
  const formData = new FormData(form);
  
  // Put all the values in an array.
  const activeTypes = [...formData.values()];
  
  // Loop over each content type element
  for (const contentType of contentTypes) {
    const type = contentType.dataset.type;
    
    // If the data-type value is present in the activeTypes array..
    const isActiveType = activeTypes.includes(type);
    
    // Add the class if active, remove it if not.
    contentType.classList.toggle('active', isActiveType);
  }
});
    .content-type {
  display: none;
}

.content-type.active {
  display: block;
}
    <form>
  <label>
    <span>Manga</span>
    <input type="checkbox" name="types" value="manga"/>
  </label>

  <label>
    <span>Manwha</span>
    <input type="checkbox" name="types" value="manwha"/>
  </label>

  <label>
    <span>Manhua</span>
    <input type="checkbox" name="types" value="manhua"/>
  </label>
</form>

<div class="content-type" data-type="manga">
  Manga
</div>

<div class="content-type" data-type="manwha">
  Manga
</div>

<div class="content-type" data-type="manhua">
  Manhua
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search