Question

我使用javascript隐藏div取决于radio button值，例如我取消隐藏div #one并填写输入字段并意识到我处于错误的交易中单击单选按钮以更改所需的事务，但不清除所有输入字段。

如果用户在单选按钮上选择，有没有办法清理输入值（我的意思是清理是清空输入字段）。

脚本

<script>
function showhidediv( rad )
    {
        var rads = document.getElementsByName( rad.name );
        document.getElementById( 'one' ).style.display = ( rads[0].checked ) ? 'block' : 'none';
        document.getElementById( 'two' ).style.display = ( rads[1].checked ) ? 'block' : 'none';
        document.getElementById( 'three' ).style.display = ( rads[2].checked ) ? 'block' : 'none';
    }
</script>

形式

<form action="aef.php" method="post">
  <label>Date</label><br />
  <input type="text" value="<?php echo date('Y-m-d'); ?>" name="date" /><br /><br />

  <input type="radio" name="transtype" value="0" onclick="showhidediv(this);" checked /> LBC Payment
  <input type="radio" name="transtype" value="1" onclick="showhidediv(this);" /> Additional Funds
  <input type="radio" name="transtype" value="2" onclick="showhidediv(this);" /> miscellaneous expense

  <br /><br />
  <div id="one">

   <label>LBC Tracking No.</label><br />
   <input type="text" value="" name="lbc" /><br /><br />

   <label>Transaction Code</label><br />
   <input type="text" value="" name="code" id="code" /><br /><br />

   <label>Credit Amout</label><br />
   <input type="text" name="credit_amout" /> 

  </div>

  <div id="two" class="divhide">
    <label>Debit Amout</label><br />
    <input type="text" name="debit_amout" />
  </div>

  <div id="three" class="divhide">
    <label>Expenses Description</label><br />
    <input type="text" id="expenses" value="" name="description" /><br /><br />

    <label>miscellaneous expense</label><br />
    <input type="text" name="credit_amout" />
  </div>


  <br /><br />
  <input type="submit" value="Add Expenses" name="submit" />
</form>

Answer 1

也许这可以让你了解如何

在javascript上

<script>
function showhidediv( rad )
    {
        var rads = document.getElementsByName( rad.name );
        document.getElementById( 'one' ).style.display = ( rads[0].checked ) ? 'block' : 'none';
        document.getElementById( 'two' ).style.display = ( rads[1].checked ) ? 'block' : 'none';
        document.getElementById( 'three' ).style.display = ( rads[2].checked ) ? 'block' : 'none';
        var input = new Array();
        if (rads[0].checked) {
          input = document.querySelectorAll('#one input');
        }

        if (rads[1].checked) {
          input = document.querySelectorAll('#two input');
        }

        if (rads[2].checked) {
          input = document.querySelectorAll('#three input');
        }

        clear_inputs(input);
    }
function clear_inputs(input) {
  for (var i = input.length - 1; i >= 0; i--) {
      input[i].value = '';
    };
}
</script>

您可以根据需要开始修改代码

函数clear_inputs将清除输入值

您可以改进此代码。

Answer 2

您可以使用 fieldset 元素围绕输入。给它起一个名字，然后你可以简单地清除它里面的所有元素，例如使用表格的简化版本：

<form ...>

  <input type="radio" name="transtype" value="0" onclick="showhidediv(this);" checked> LBC Payment
  <input type="radio" name="transtype" value="1" onclick="showhidediv(this);"> Additional Funds
  <input type="radio" name="transtype" value="2" onclick="showhidediv(this);"> miscellaneous expense

  <div id="one">
  <fieldset name="f0">

   <label>LBC Tracking No.</label><br>
   <input type="text" value="" name="lbc"><br><br>

   <label>Transaction Code</label><br>
   <input type="text" value="" name="code" id="code"><br><br>

   <label>Credit Amout</label><br>
   <input type="text" name="credit_amout">
  </fieldset>
 </div>
</form>

然后在函数中：

function showhidediv(element) {

  // Get the field set
  var set = element.form.f0.elements;

  // Reset the elements to their default value
  for (var i=0, iLen=set.length; i<iLen; i++) {
    set[i].value = set[i].defaultValue;
  }

  // Do other stuff...
}

如果您不喜欢表单布局上字段集的默认效果，则可以删除边框并更改其 style.display 属性。

此外，在做的时候：

document.getElementById( 'one' ).style.display = rads[0].checked? 'block' : 'none';

你应该在'none'和''（空字符串）之间切换值，以便元素采用其默认或继承的样式，无论它是什么。

Answer 3

我已经创建了这个函数来清除输入中的数据，但它也可以帮助你读取父div中包含的元素，读取值并决定要做什么..

     function clear_inputs(div){
     parent_content=document.getElementById(div); 
     child_elements=parent_content.getElementsByTagName('input');
     co = child_elements.length;co--;
    /*elements goes from 0 to ∞, length goes from 1 to ∞, thats why c-- to loop thru the elements.*/

    /*console.log(elementos);console.log(co); use this if you want to see the elements you are working with on browser's console*/

    for (i=0;i<=co;i++) {child_elements[i].value = "";}// empty values for inputs 
                         }
      }

清除hide <div> </div>中的输入值

3 个答案: