Question

我正在尝试使用以下代码隐藏表单中的输入元素。但它没有用......

<html lang="en">
   <head>
      <title>children demo</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>
   <body>
      <h1>Hello</h1>
      <div>
         <h1 class="selected">div-1</h1>
         <h1 class="selected">div-2</h1>
      </div>
      <h1>xyz</h1>
      <form name= "demo form">
      First name:<input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="submit">
      <script>
         $( "div" ).children( ".selected" ).css( "background-color", "yellow" );
         document.body.style.backgroundColor = "red";
         $( demo_form.elements ).hide();
      </script>
   </body>
</html>

Answer 1

您的选择器$( demo_form.elements ).hide();不正确。

要选择input中的所有form元素，您可以使用$('input')选择器

$('form input').hide();

如果您想隐藏form本身，

$('form').hide();

Answer 2

大多数情况下应该使用css完成：

form.hide-inputs input{
     display: none;
}

并在jquery / JavaScript中添加类hide-inputs：

$('form').addClass('hide-inputs');

Answer 3

如果要隐藏ID＆＃34; formId＆＃34;的表单/元素中的所有元素。使用以下内容:(相应地更改标签名称，使其在任何您想要的地方工作）

最好有css：

form#formId input{
     display: none;
}

使用Jquery：

$("form#formId input").hide();

如果你想隐藏特定类型的输入，例如＆＃34; text＆＃34;使用以下：

使用css：

form#formId input[type='input']{
         display: none;
    }

使用jQuery：

$("form#formId input[type='text']").hide();

Answer 4

如果要按名称选择表单，则需要使用

之类的内容

$('form[name=demo form]')

我建议您在要隐藏的表单上使用id。

 <form id="demo-form" name="demo form">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="submit">
 </form>

$(document).ready(function() {
    $('#demo_form input').hide();
});

注意：

检查语法
别忘了关闭表单元素

Answer 5

＆＃13;

$('input[type="text"]').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
    <head>
      <title>children demo</title>
    </head>
    <body>
     <h1>Hello</h1>
  
     <h1>xyz</h1>

     <form name= "demo form">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="submit">

    </body>
    </html>

＆＃13;

您正在使用demo_form，但没有应该使用的类demo_form

$('input[type="text"]').hide();

您可以在此处看到示例

如何隐藏表单中的所有输入元素？

5 个答案: