时间戳

首页 > 解决方案 > 在流星中检查时复选框不显示元素

javascript - 在流星中检查时复选框不显示元素

问题描述

我在流星中工作，并试图在选中复选框时显示一段代码。我是 JS 和 jquery 的新手，但我研究了编写 JS 的不同方式。这就是我想出的：

<div class="recipient">
      <div class="toRecipient-container">
        <label class="toRecipient">TO:</label>
        <input class="toRecipient" type="text" size="45">
      </div>
        <br>
      <div id="checkbox-container" class="checkbox-container">
        <label for="newClient">New Client
        <input id="newClient" class="newInfo" type="checkbox" onclick="toggle()"></label>
        <label for="newBilling" style="padding-left: 20px;">New Billing
        <input id="newBilling" class="newInfo" type="checkbox"></label>
      </div>
    </div>
    <div id="billingDetails-container" class="billingDetails-container">
      <div class="billingDetails">
          <label>Billing Contact:</label>
          <input class="billingContact" type="text" size="45">
          <label>Billing Phone:</label>
          <input class="billingPhone" type="text" size="45">
        <div>
          <label>Billing Address:</label>
          <input class="billingAddress" type="text" placeholder="Street Address" size="45">
          <input class="billingAddress" type="text" placeholder="City" size="45">
          <input class="billingAddress" type="text" placeholder="State" size="45">
          <input class="billingAddress" type="text" placeholder="Zip Code" size="45">
        </div>
        <label>Billing Email:</label>
        <input class="billingEmail" type="text" size="45">
      </div>
    </div>

还有我的 JS：

    Template.InvoicePage.onCreated(function () {
  this.state = new ReactiveVar();
});

Template.InvoicePage.helpers({
  toggle: ()=>{
    var checkBox = document.getElementById("newClient");
    var displayBlock = document.getElementById("billingDetails-container");
    if (checkBox.checked == true) {
      displayBlock.style.display = "block";
    } else {
      displayBlock.style.display = "none";
    }
  },
});

Template.InvoicePage.events({
  'change #newClient'(event, instance) {
    instance.state.set('newClient', event.target.checked)
  },
});

当我选中该框时，我收到“切换”未定义的错误。这应该是模板事件而不是助手吗？我错过了什么？

标签： javascriptmeteor

解决方案

我相信您正在尝试显示billingDetails-container用户选择New-Client复选框的时间。如果这是正确的，下面应该工作

HTML

<div class="recipient">
  <div class="toRecipient-container">
    <label class="toRecipient">TO:</label>
    <input class="toRecipient" type="text" size="45">
  </div>
  <br>
  <div id="checkbox-container" class="checkbox-container">
    <label for="newClient">New Client
    <input id="newClient" class="newInfo" type="checkbox"></label>
    <label for="newBilling" style="padding-left: 20px;">New Billing
    <input id="newBilling" class="newInfo" type="checkbox"></label>
  </div>
</div>
{{#if showBillingDetails}}
  <div id="billingDetails-container" class="billingDetails-container">
    <div class="billingDetails">
      <label>Billing Contact:</label>
      <input class="billingContact" type="text" size="45">
      <label>Billing Phone:</label>
      <input class="billingPhone" type="text" size="45">
      <div>
        <label>Billing Address:</label>
        <input class="billingAddress" type="text" placeholder="Street Address" size="45">
        <input class="billingAddress" type="text" placeholder="City" size="45">
        <input class="billingAddress" type="text" placeholder="State" size="45">
        <input class="billingAddress" type="text" placeholder="Zip Code" size="45">
      </div>
      <label>Billing Email:</label>
      <input class="billingEmail" type="text" size="45">
    </div>
  </div>
{{/if}}

JS

Template.InvoicePage.events({
  'change #newClient'(event, instance) {
    instance.state.set({
      'newClient': event.target.checked  //Here, we are set the newclient property of state object based on client's selection.
    });
  }
});

Template.InvoicePage.helpers({
  showBillingDetails() {
    const state = Template.instance().state.get();
    return state && state.newClient; //Here, we use the newclient property of state to decide whether or not to display the billingDetails-container
  }
});

推荐阅读