隐藏一个未定义的表格

Question

我试图根据无线电字段中使用的选择，将两个字段隐藏在我的表单上。这是字段html：

function show1() {
  document.getElementByClass('extra').style.display = 'none';
}
function show2() {
  document.getElementByClass('extra').style.display = 'block';
}

<div class="form-radio">
  <div class="radio">
    <label>
      <input type="radio" name="radio" onclick="show1();" /><i class="helper"></i>
      I can come
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="radio" onclick="show2();" /><i class="helper"></i>
      I cant come
    </label>
  </div>
</div>
<div class="form-group extra">
  <input type="text" required="required" />
  <label class="control-label" for="input">Dietary Requirements</label>
  <i class="bar"></i>
</div>
<div class="form-group extra">
  <input type="text" required="required" />
  <label class="control-label" for="input">What song would you like played?</label>
  <i class="bar"></i>
</div>

当用户在无线电场上选择"我不能来"时，它应该通过隐藏饮食要求以及哪些歌曲字段来起作用。我得到以下结果：

Uncaught ReferenceError: show2 is not defined
at HTMLInputElement.onclick ((index):627)

Answer 1

您的代码失败有两个原因：

1. 没有document的方法称为getElementByClass。正确使用的方法是getElementsByClassName。

2. 方法getElementsByClassName返回HTMLCollection而不是一个元素，因此为HTMLCollection设置style.display不会具有所需的效果，因为您不是为其每个单独元素设置它，而是为HTMLCollection对象本身。

正确的代码是：

function show() {
  /* Cache the collection. */
  var extra = document.getElementsByClassName('extra');
  /* Iterate over every element in the collection. */
  [].forEach.call(extra, function (element) {
     element.style.display = 'block';
  });
}
function hide() {
  /* Cache the collection. */
  var extra = document.getElementsByClassName('extra');
  /* Iterate over every element in the collection. */
  [].forEach.call(extra, function (element) {
     element.style.display = 'none';
  });
}

代码：

/* ----- JavaScript ----- */
function show() {
  /* Cache the collection. */
  var extra = document.getElementsByClassName('extra');
  /* Iterate over every element in the collection. */
  [].forEach.call(extra, function(element) {
    element.style.display = 'block';
  });
}
function hide() {
  /* Cache the collection. */
  var extra = document.getElementsByClassName('extra');
  /* Iterate over every element in the collection. */
  [].forEach.call(extra, function(element) {
    element.style.display = 'none';
  });
}

<!----- HTML ----->
<div class="form-radio">
  <div class="radio">
    <label>
      <input type="radio" name="radio" onclick="show();" checked/>
      <i class="helper"></i>
      I can come
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="radio" onclick="hide();"/>
      <i class="helper"></i>
      I cant come
    </label>
  </div>
</div>
<div class="form-group extra">
  <input type="text" required="required" />
  <label class="control-label" for="input">Dietary Requirements</label>
  <i class="bar"></i>
</div>
<div class="form-group extra">
  <input type="text" required="required" />
  <label class="control-label" for="input">What song would you like played?</label>
  <i class="bar"></i>
</div>

Answer 2

您可以使用jQuery代替JavaScript。

     jQuery(document).ready(function($){
      $('input:radio[name="radio"]').change(function(){
        if($(this).val() == 'hide'){
          $('.extra').hide();    
         }
           else {
          $('.extra').show();   
         }
        });
         });


      <div class="form-radio">
       <div class="radio">
        <label>
           <input type="radio" name="radio" value="show" /><i class="helper"></i>
          I can come
         </label>
        </div>
        <div class="radio">
       <label>
           <input type="radio" name="radio" value="hide" /><i class="helper"></i>
           I cant come
         </label>
           </div>
         </div>
          <div class="form-group extra">
          <input type="text" required="required" />
          <label class="control-label" for="input">Dietary Requirements</label>
          <i class="bar"></i>
          </div>
          <div class="form-group extra">
          <input type="text" required="required" />
           <label class="control-label" for="input">What song would you like played?</label>
           <i class="bar"></i>
             </div>