Question

我试图在我的表单上隐藏两个字段，具体取决于无线电字段上的使用选择。这是字段HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

它应该通过隐藏饮食要求和用户选择的歌曲字段来起作用＃34;我不能来＃34;在无线电领域。我得到以下结果：

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

Answer 1

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

rvm没有名为document的方法。正确的使用方法是getElementByClass。
方法getElementsByClassName会返回getElementsByClassName而不是单个元素，因此为HTMLCollection设置style.display将无法获得所需的效果，因为您不是为它的每个单独元素设置它，而是为HTMLCollection对象本身设置它。

正确的代码是：

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

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>

使用javascript隐藏表单 - 未定义

2 个答案: