Javascript - 如果复选框处于活动状态，则显示不同的内容

Question

我正在尝试在 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 上的教程，但到目前为止没有取得多大成功，因为我在我的同一请求类型中没有找到任何东西。

谢谢

Answer 1

你对代码的思考有误。

函数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() 的较小形式。

Answer 2

首先，为所有复选框指定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>

Answer 3

我能想到的最简单、最干净的解决方案是：

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 季中保持不变。