Javascript

Question

我正在尝试在 JQuery 中设置一些东西，但目前我不太确定我做对了。

为简单起见，我想显示 4 个复选框。这些复选框用作过滤器。例如，假设第一个复选框是 spring，第二个是夏天，第三个是秋天，第四个是冬天。

当我选中“夏季”框时，我希望显示一些文本。如果我勾选秋季的，则会显示另一个文本。基本上，我想根据勾选的内容显示不同的文本。

<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>

如果可能：我们可以勾选多个方框吗？

我一直在关注 Whosebug 上的教程，但到目前为止收效甚微，因为我没有找到符合我相同要求的任何内容。

谢谢

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 returns 来自已传递复选框的属性 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 个季节中保持不变。

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

Javascript - Display a different content if a checkbox is active

html

forms

jquery