CODEWITHSUNDEEP
jquerycheckbox
Max
Max

Reputation: 940

Hiding only checkbox

I made a list of checkbox like this:

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

Since there are too many checkboxes, I'd like to hide unnecessary ones. I need mostly the ones with class="all". Can I hide the checkboxes with class="selector" keeping their labels visible. I made another checkbox for this purpose with class="Hide" at the top.

Upvotes: 0

Views: 122

Answers (3)

Dan Costinel
Dan Costinel

Reputation: 1736

If you don't necessarily need jquery and if you are using PHP as the scripting language, then this may be helpful:

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

EDIT Working now!

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

Upvotes: 0

Alex
Alex

Reputation: 713

Try using jquery in your html if you want to do it later in the page,

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

Load Jquery from here: http://jquery.com/

otherwise make css display:none

Upvotes: 0

Josh Stevens
Josh Stevens

Reputation: 4221

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

place this code at the top of your page.

this will hide your .Hide input box.. if you want to apply this on .selector just change .Hide to .selector

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

i put this in style tags as you probably don't know what a stylesheet is.. best practice is to put it in a stylesheet though.

i dont know what you mean by keeping the labels of the .selector if you dont want the input box you can just use a <p>exmaple</p> tag to put text in your web page

JQuery way would be

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

Upvotes: 1

Related Questions