未选中时无法显示div

Question

我正在尝试使用引导切换来创建切换，以便在每月和每年计划之间进行更改。我得到的切换功能，它移动和看起来不错，但我不能让JS部分工作。所以它现在只会显示monthly 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> 

每月格

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

年度股利

<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

您需要了解在JavaScript中，这是做的东西时，别的事情发生在一个很基本的概念。以技术术语来说，绑定到事件。您绑定的每某些事件发生时的一些代码（通常在功能包起来）执行：

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

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

选项是可选

现在，回到你的例子：

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。

---

另外，由于您使用的引导，这意味着你也使用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 2

你需要一个事件侦听分配给切换。这种方式分配的功能将被执行。此功能显示正确的块。

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 3

你的JavaScript 。因此，如果您在HTML中将其中的一个分配为“已检查”，那么这将起作用。然而，没有什么是检查这些复选框是否勾选或事后。

将事件处理函数绑定到元素将允许再次检查该值。最常用的按钮是“更新”按钮，但由于您使用的是复选框，因此您可以将复选框中的单击事件绑定到一个复选框，以便立即评估它是否被选中。

所以你需要将这一点的代码绑定到一个事件，如按钮点击。这是可以做到这样：

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