在流星中选中时复选框不显示元素

Question

我在 meteor 中工作，并试图在选中复选框时显示一段代码。我是 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)
  },
});

当我选中该框时，出现 'toggle' 未定义的错误。这应该是模板事件而不是助手吗？我错过了什么？

Answer 1

我从来没有用流星做过任何事情。网站上列出了许多不同的框架。我不确定你用的是哪一个（如果有的话）。你不可能同时使用 angular、react 和 vuejs。

除非我错了，而且整个有特殊原因

Template.InvoicePage.helpers({...});

简单做

function 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";
    }
}

与框架无关。只是香草 javascript 和 html.

Answer 2

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

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

在流星中选中时复选框不显示元素

Checkbox not display element when checked in meteor

javascript

meteor