使用Javasrcipt來判斷複選多個checkbox的結果

javascript checkbox

Cooper 2021-09-20 14:20:30 ‧ 1712 瀏覽

分享至

各位大神好,

目前在摸索原生Javasrcipt, 用checkbox來控制顯示出來的項目, 使用data-來判斷是否與項目是否符合, 在未符合的加上class "hide"

目前跑單個沒有問題, 但選了第二個checkbox後第一個checkbox就失效了, 摸不著頭緒

想請問如果勾選兩個以上checkbox 要怎麼保留先前的判斷呢?

附上JS碼

const pdItem = document.querySelectorAll('.shopbox');
document.querySelector('.item-container').addEventListener('click', (event) => {
  const filterClass = event.target.dataset['name'];
  for (var i = 0; i < pdItem.length; i++) {
    if (!pdItem[i].classList.contains(filterClass)) {
      pdItem[i].classList.add('hide');
    } else {
      pdItem[i].classList.remove('hide');
    }
  }
});

附上練習code
https://jsfiddle.net/cooper081/7gud21ah/3/

小弟第一次發文詢問, 如有不清楚或錯誤的地方,請見諒

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

小魚

iT邦大師 1 級 ‧ 2021-09-20 15:23:28

最佳解答

這樣很好,
有貼測試網站別人比較方便除錯,

另外你的判斷方式錯了,
我改寫成這樣你看看

document.querySelector('.item-container').addEventListener('click', (event) => {
  const check = event.target.checked;
  const filterClass = event.target.dataset['name'];

  var pdItem = document.querySelectorAll('.shopbox.'+filterClass);

  if(check)
  {
    for (var i = 0; i < pdItem.length; i++)
    {
        pdItem[i].classList.add('hide');
    }
  }
  else
  {
    for (var i = 0; i < pdItem.length; i++)
    {
        pdItem[i].classList.remove('hide');
    }
  }
});

另外我原本是要用一個list去接所有checked的資料,
後來發現用不到,
又拿掉了.

我這是針對每次事件單獨處理,
沒有去管其他元件發生什麼事.

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Cooper iT邦新手 5 級 ‧ 2021-09-21 12:00:32 檢舉

謝謝, 看了您的code感受到自己複雜化了, 值得好好吸收讓腦袋轉一下,非常好理解

想另外請教,如果依照這個code反過來的判斷方向呢?
意思是:

選了 pic-1 符合的留下, 非符合的 + hide
繼續選了 pic-2 符合的留下, 非符合的 + hide, 保留 pic-1
繼續選了 pic-3 符合的留下, 非符合的 + hide, 保留 pic-1 + pic-2

小魚 iT邦大師 1 級 ‧ 2021-09-21 17:21:15 檢舉

那就是一開始全部hide,
click的地方反過來就好了.

Cooper iT邦新手 5 級 ‧ 2021-09-21 18:37:03 檢舉

這個迴路當下有想到跟實作, 不過這樣調適後變成一開始時候圖片就會被隱藏, 如果一開始讓圖片保持顯示呢?

小魚 iT邦大師 1 級 ‧ 2021-09-21 19:22:32 檢舉

這樣你的邏輯就有問題了啊,
因為你一開始三個都是沒有打勾的狀態,
除非你預設讓它們都是打勾的狀態.

登入發表回應

淺水員

iT邦大師 6 級 ‧ 2021-09-20 15:13:08

//用 IIFE 可以避免全域有太多的變數
const updatePdItems = (() => {

    // checkbox 的集合
    const cbList = document.querySelectorAll('.item-container input[type="checkbox"]');

    // name => element 字典
    const pdDict = Array.from(cbList).reduce((o, e) => {
        o[e.dataset.name] = document.querySelector('.' + e.dataset.name);
        return o;
    }, {});

    //處理 click 的函式
    return function (event) {
        cbList.forEach(checkbox => {
            pdDict[checkbox.dataset.name].classList.toggle('hide', !checkbox.checked);
        });
    }
})();

//開始時先執行一次，讓畫面的圖片符合 checkbox 的選擇
updatePdItems();

//掛載 click 事件（這邊也可以改用 change 事件）
document.querySelector('.item-container').addEventListener('click', updatePdItems);