Javascript-如果復選框處于活動狀態，則顯示不同的內容

我正在嘗試在 JQuery 中設定一些東西，但目前我不確定我做得對。

為了簡單起見，我想顯示 4 個復選框。這些復選框用作過濾器。例如，假設第一個復選框是春季，第二個是夏季，第三個是秋季，第四個是冬季。

當我選中“夏天”框時，我希望顯示一些文本。如果我勾選秋季，則會顯示另一個文本。基本上，我想根據勾選的內容顯示不同的文本。

<script type="text/javascript">
    function ShowHideDiv(winter) {
        var winter_list = document.getElementById("winter_list");
        winter_list.style.display = winter.checked ? "block" : "none";
    }
</script>
<script type="text/javascript">
    function ShowHideDiv(summer) {
        var summer_list = document.getElementById("summer_list");
        summer_list.style.display = summer.checked ? "block" : "none";
    }
</script>

<label for="checkWinter">
    <input type="checkbox" id="winter" onclick="ShowHideDiv(winter)" />
    Winter
</label>
<label for="checkSummer">
    <input type="checkbox" id="summer" onclick="ShowHideDiv(summer)" />
    Summer
</label>
<hr />


<!-- For Winter -->
<div id="winter_list" style="display: none">
<p>Text come here</p>
</div>


<!-- For Summer -->
<div id="summer_list" style="display: none">
<p>Text come here for summer</p>
</div>

如果可能：我們是否可以勾選多個方框？

我一直在關注 StackOverflow 上的教程，但到目前為止沒有取得太大成功，因為我在我的同一請求型別中沒有找到任何東西。

謝謝

uj5u.com熱心網友回復：

你在思考你的代碼時犯了一個錯誤。

該函式ShowHideDiv()確實存在兩次，并且 Javascript 多載了它。因為您傳遞了一個未定義的物件，所以瀏覽器會選擇其中一個。

我的建議：

第一步：將輸入欄位中的函式呼叫替換為<input type="checkbox" id="summer" onclick="ShowHideDiv(this)" />. 該引數this將單擊的物件傳遞給目標函式。

第二步：將所有函式“ShowHideDiv”合并為一個：

function ShowHideDiv(checkbox) {
   switch (checkbox.id)
   {
      case "summer":
            var summer_list = document.getElementById("summer_list");
             summer_list.style.display = summer.checked ? "block" : "none";
         break;
      case "winter":
          var winter_list = document.getElementById("winter_list");
                winter_list.style.display = winter.checked ? "block" : "none";
          break;
      default:
        //What ever you want do to
        break;
   }
}

該引數checkbox.id從傳遞的復選框的屬性 id 回傳值。

Switch and case是 的較小形式if() else if() and else()。

uj5u.com熱心網友回復：

首先，給你所有的復選框一個id. 然后，您可以添加data-target到顯示文本以便于選擇。試試這個

<label for="winter">
    <input type="checkbox" id="winter" onchange="ShowHideDiv(this)" />
    Winter
</label>
<label for="summer">
    <input type="checkbox" id="summer" onchange="ShowHideDiv(this)" />
    Summer
</label>
<hr />

<!-- Display text -->
<div>
    <p style="display: none" data-target="#winter">Text come here</p>
    <p style="display: none" data-target="#summer">Text come here for summer</p>
</div>

<script type="text/javascript">
    function ShowHideDiv(elem) {
        var target = document.querySelector('[data-target="#' elem.id '"]');
        target.style.display = elem.checked ? 'block' : 'none';
    }
</script>

uj5u.com熱心網友回復：

我能想到的最簡單、最干凈的解決方案是：

const ShowHideDiv = function (check, season) {
  let el = document.getElementById(season);
  
  // hide element(s)
  el.classList.add('hidden');
  
  // Show element(s) if checked
  if(check.checked === true){
    el.classList.remove('hidden');
  }
}

.hidden {
  display: none;
}

<label for="checkWinter">
    <input id="checkWinter" type="checkbox" onchange="ShowHideDiv(this, 'winter')" />
    Winter
</label>
<label for="checkSummer">
    <input id="checkSummer" type="checkbox" onchange="ShowHideDiv(this, 'summer')" />
    Summer
</label>
<label for="checkSpring">
    <input id="checkSpring" type="checkbox" onchange="ShowHideDiv(this, 'spring')" />
    Spring
</label>
<hr />


<!-- For Winter -->
<div class="hidden" id="winter">
  <p>Text come here  for winter</p>
</div>


<!-- For Summer -->
<div class="hidden" id="summer">
  <p>Text come here for summer</p>
</div>


<!-- For Spring -->
<div class="hidden" id="spring">
  <p>Text come here for spring</p>
</div>

它可以在 2、3 或 4 季中無變化地作業。

標籤：javascript html jQuery 形式

上一篇：向用戶顯示驗證反饋

下一篇：Formik回傳舊值狀態