未选中时无法显示 div

Question

我正在尝试使用 bootstrap 切换来创建一个切换以在月度计划和年度计划之间切换。我让切换功能在它移动和看起来正确的意义上起作用，但我无法让 JS 部分工作。所以它现在只会显示 monthly div，不会切换到年度 div。目前这就是我所拥有的

切换

<div class="container">
   <div class="row">
     <div class="col-md-5"></div>
     <div class="col-md-4 selectCenter">
       <br>
       <input type="checkbox" checked  id="toggle" data-toggle="toggle" data-on="Monthly" data-off="Annual" data-style="ios" data-onstyle="primary" data-offstyle="primary">
     </div>
   </div>

每月div

<section class="se-section" id="monthly">
    <div class="container">
      <div class="row">
       <div class="col-md-4 col-sm-6">
         <h1>Monthly</h1>
       </div> <!-- end col-md-4 -->
      </div> <!-- end row -->
    </div> <!-- end container -->
  </section>

年度div

<section class="se-section" id="annual">
    <div class="container">
      <div class="row">
       <div class="col-md-4 col-sm-6">
         <h1>Annual</h1>
       </div> <!-- end col-md-4 -->
      </div> <!-- end row -->
    </div> <!-- end container -->
  </section>

然后我的javascript

var toggle = document.getElementById("toggle");
var monthly = document.getElementById("monthly");
var annual = document.getElementById("annual");

if(toggle.checked){
  monthly.style.display = 'block';
  annual.style.display = 'none';
}
if(!toggle.checked){
  monthly.style.display = 'none';
  annual.style.display = 'block';
}

Answer 1

您需要为切换分配一个 EventListener。以这种方式分配的功能将被执行。此函数显示正确的块。

toggle.addEventListener('change', togglePlanViews);

function togglePlanViews() {
    if(toggle.checked){
      monthly.style.display = 'block';
      annual.style.display = 'none';
    } else {
      monthly.style.display = 'none';
      annual.style.display = 'block';
    }
}

Answer 2

您需要了解 JavaScript 中的一个非常基本的概念，即在发生其他事情时做一些事情。在技术术语中，绑定到一个事件。每次发生某些事件时，您都会绑定一些代码的执行（通常包含在一个函数中）：

target.addEventListener(type, listener[, options]);

type 是事件本身（它的名字）
listener 是要执行的函数的名字（你可以有一个匿名函数而不是名字，但最好保持整洁，把你的代码放在里面命名函数
选项是：
- capture：一个布尔值，指示此类型的事件在被分派到 DOM 树中它下面的任何 EventTarget 之前将被分派到已注册的侦听器。
- once：布尔值，表示监听器在添加后最多调用一次。如果为真，侦听器将在调用时自动删除。
- passive：一个布尔值，表示侦听器永远不会调用 preventDefault()。如果是，用户代理应该忽略它并生成一个控制台警告。请参阅使用被动侦听器提高滚动性能以了解更多信息。
- mozSystemGroup：一个布尔值，指示应将侦听器添加到系统组。仅在 XBL 中的代码运行或 Firefox 的 chrome.

选项是可选的

现在，回到你的例子：

var toggle = document.getElementById("toggle"),
    monthly = document.getElementById("monthly"),
    annual = document.getElementById("annual");

// define functionality: 
function toggleDivs() {
   monthly.style.display = toggle.checked ? 'block' : 'none';
   annual.style.display = toggle.checked? 'none' : 'block';
}

// bind to `change` on toggle:
toggle.addEventListener('change', toggleDivs, {passive:true});

// bind to `window.onload` (so it runs once when the page is loaded):
window.onload = toggleDivs;

就是这样。请注意，在 window.onload 上绑定这样的函数并不是最佳实践（它可以覆盖另一个绑定，也可以被后续的类似函数覆盖）。阅读 this 了解详情。

或者，由于您使用的是 Bootstrap，这意味着您还使用了 jQuery，这样可以实现更简洁的语法：

// define the function: 
function toggleDivs() {
  $('#monthly').css('display', $('#toggle').prop('checked') ?
    'block':'none');
  $('#weekly').css('display', $('#toggle').prop('checked') ?
    'none':'block');    
}
// bind to `change` on `#toggle` : 
$('#toggle').on('change', toggleDivs);

// bind to `load` on `window` :
$(window).on('load', toggleDivs);

Answer 3

您的 Javascript 实际上只在页面加载时执行一次。因此，如果您首先将其中一个分配为 HTML 中的 'checked'，这将起作用。但是，之后没有检查这些复选框是否被选中。

将事件处理程序绑定到元素将允许再次检查该值。最常见的是使用按钮，例如 'Update' 按钮，但由于您使用的是复选框，因此您可以将一个按钮绑定到复选框上的单击事件，这样无论是否选中，都会立即对其进行评估。

所以您需要将那段代码与按钮点击等事件相关联。可以这样做：

var toggle = document.getElementById("toggle");
var monthly = document.getElementById("monthly");
var annual = document.getElementById("annual");

toggle.addEventListener('click', function(){ //bind an anonymous function to a button click for the element referenced by 'toggle'
    if(toggle.checked){
        monthly.style.display = 'block';
        annual.style.display = 'none';
    }
    if(!toggle.checked){
        monthly.style.display = 'none';
        annual.style.display = 'block';
    }
});

现在，每当有人单击该复选框时，都会评估该复选框的值（选中或未选中）并将后续效果应用于样式。

您还可以抽象一些细节并创建一个处理检查的命名函数，您可以在单击事件时简单地调用命名函数而不是匿名函数。

function checkTimeframe(){
    if(toggle.checked){
        monthly.style.display = 'block';
        annual.style.display = 'none';
    }
    if(!toggle.checked){
        monthly.style.display = 'none';
        annual.style.display = 'block';
    }
}
var toggle = document.getElementById("toggle");
var monthly = document.getElementById("monthly");
var annual = document.getElementById("annual");

toggle.addEventListener('click', checkTimeframe);

未选中时无法显示 div

Can't get div to show when unchecked

html

javascript

css

togglebutton

twitter-bootstrap