仅隐藏复选框

Question

我做了一个这样的复选框列表：

<input type="checkbox" name="Hide" class="Hide" />Hide</label>
 

            <form id="form1" name="form1" method="post" action="">
                    <label>                
                    <input type="checkbox" name="SelectAll" class="all" />All</label>
                    <label>
                    <input type="checkbox" name="f1" class="selector" />F1</label>
                    <label>
                    <input type="checkbox" name="f2" class="selector" />F2</label>
                    <label>
                    <input type="checkbox" name="f3" class="selector" />F3</label>
                    <label>
                    <input type="checkbox" name="f4" class="selector" />F4</label>
                                      
            </form> 
            <form id="form2" name="form2" method="post" action="">
             <label>                
                    <input type="checkbox" name="SelectAll" class="all" />All</label>
                    <label>
                    <input type="checkbox" name="1" class="selector" />1</label>
                    <label>
                    <input type="checkbox" name="2" class="selector" />2</label>
                    <label>
                    <input type="checkbox" name="3" class="selector" />3</label>
                    <label>
                    <input type="checkbox" name="4" class="selector" />4</label>
                                      
            </form>

由于复选框太多，我想隐藏不需要的。我主要需要 class="all" 的那些。我可以使用 class="selector" 隐藏复选框以保持其标签可见吗？为此，我在顶部制作了另一个复选框 class="Hide"。

Answer 1

why use jQuery for this when css can do it easily (that was the whole reason it was designed to manipulate the UI view)

将此代码放在页面顶部。

这将隐藏您的 .Hide 输入框。如果您想在 .selector 上应用它，只需将 .Hide 更改为 .selector

<style>
     .Hide{
      display:none;
      }
</style>

我把它放在样式标签中，因为您可能不知道什么是样式表。不过最好的做法是将它放在样式表中。

我不知道你保留 .selector 的标签是什么意思，如果你不想要输入框，你可以只使用 <p>exmaple</p> 标签在你的网页中放置文本

JQuery way would be

$('.Hide').hide();

Answer 2

如果您想稍后在页面中使用 jquery，请尝试在您的 html 中使用

$(".hide , .all").hide();

从此处加载 Jquery： http://jquery.com/

否则使cssdisplay:none

Answer 3

如果您不一定需要 jquery 并且如果您使用 PHP 作为脚本语言，那么这可能会有所帮助：

<?php
if(isset($_POST['hide'])){?>
    <style type="text/css">
    .selector1{
        display: none;
        visibility: hidden;
    }
    </style><?php
}
if(isset($_POST['show'])){?>
    <style type="text/css">
    .selector1{
        display: inline-block;
        visibility: visible;
    }
    </style><?php
}
?>

<form id="form1" name="form1" method="post" action="">
    <label>                
        <input type="checkbox" name="SelectAll" class="all" />All
    </label>
    <label>
        <input type="checkbox" name="f1" class="selector1" />F1
    </label>
    <label>
        <input type="checkbox" name="f2" class="selector1" />F2
    </label>
    <label>
        <input type="checkbox" name="f3" class="selector1" />F3
    </label>
    <label>
        <input type="checkbox" name="f4" class="selector1" />F4
    </label>
    <input type="submit" name="hide" value="Hide"/>
    <input type="submit" name="show" value="Show"/>
</form>

编辑现在工作！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
    <input type="checkbox" id="hide"/> Hide
    <form id="form1" name="form1" method="post" action="">
        <label>                
            <input type="checkbox" id="SelectAll" class="all" />All
        </label>
        <label>
            <input type="checkbox" name="f1" class="selector1" />F1
        </label>
        <label>
            <input type="checkbox" name="f2" class="selector1" />F2
        </label>
        <label>
            <input type="checkbox" name="f3" class="selector1" />F3
        </label>
        <label>
            <input type="checkbox" name="f4" class="selector1" />F4
        </label>
    </form>
    <script type="text/javascript">
    $( "#hide").on( "click", function() {
        $(".selector1").toggle();
    });
    </script>    
</body>
</html>

仅隐藏复选框

Hiding only checkbox

checkbox

jquery