JQuery .show() method not Working After .hide

Question

I am working with a JQuery script that allows a checkbox (its class name is "adminCheckBox") to show or hide various objects on the screen based on whether or not it is checked.

The hiding function works fine. However, after the elements have been hidden and I press the checkbox again, the elements do not appear again. Are there any ideas as to why this may be? Thank you.

$(document).ready(function(){

$(".adminCheckbox").click(function(){

           if(!document.getElementsByClassName("adminCheckBox").checked){

            $(".deleteImageButton").hide(500);
            $(".addHeading").hide(500);
            $(".deleteHeadingButton").hide(500);
            $(".fileUpload").hide(500);
            $(".fileUploadSubmit").hide(500);    

           }else{

            $(".deleteImageButton").show();
            $(".addHeading").show();
            $(".deleteHeadingButton").show();
            $(".fileUpload").show();
            $(".fileUploadSubmit").show();    

           }    

        }); 
        });

Below is the HTML for the checkbox in question.

        <br><div class="adminControls"><input type="checkbox" class="adminCheckbox"         checked="checked"><div class="checkBoxText">&nbsp;&nbsp;Admin Controls</div></div>

Answer 1

Use .toggle() function to hide and show your buttons.

And use the .change() event/handler instead of .click().

According to the jQuery API:

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Try this:

$(document).ready(function () {
    $('.adminCheckbox').on('change', function () {
        $(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle(500);
    });
});

JSFiddle Demo

Answer 2

The problem comes from document.getElementsByClassName and the return as an array.

http://jsfiddle.net/c964v/

$(".adminCheckbox").click(function(){
    if(!$(".adminCheckbox").is(":checked")){
        $(".deleteImageButton").hide(500);   
    }else{               
        $(".deleteImageButton").show();           
    }  
}); 

See u!

Answer 3

<?php


?>
<script src="jquery.min.js"></script>
<script> 
$(document).ready(function(){

$("#lap1").click(function(){
prodtype="laptop";
$("#cam").hide();
$("#mob").hide();
$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").show(function(){

rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}

});


$.ajax({
        type:'GET',
        url:'alldisplay.php',
        data:"prodtype="+prodtype,
        success:function(response){
        document.getElementById("right").innerHTML=response;
        }
        });

});





$("#came").click(function(){
prodtype="camera";

$("#mob").hide();
$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").show(function(){

rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});

$.ajax({
        type:'GET',
        url:'alldisplay.php',
        data:"prodtype="+prodtype,
        success:function(response){
        document.getElementById("right").innerHTML=response;
        }
        });
});



$("#mobi").click(function(){

prodtype="mobile";

$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").show(function(){

rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});

$.ajax({
        type:'GET',
        url:'alldisplay.php',
        data:"prodtype="+prodtype,
        success:function(response){
        document.getElementById("right").innerHTML=response;
        }
        });

});




$("#scrv").click(function(){

prodtype="clothes";

$("#scarves").hide();
$("#bag").hide();
$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").hide();
$("#scarves").show(function(){

rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});


$.ajax({
        type:'GET',
        url:'alldisplay.php',
        data:"prodtype="+prodtype,
        success:function(response){
        document.getElementById("right").innerHTML=response;
        }
        });
});




$("#bagg").click(function(){

prodtype="bags";

$("#scarves").hide();

$("#glass").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").hide();
$("#bag").show(function(){

rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});



$.ajax({
        type:'GET',
        url:'alldisplay.php',
        data:"prodtype="+prodtype,
        success:function(response){
        document.getElementById("right").innerHTML=response;
        }
        });
});



$("#glasss").click(function(){

prodtype="glass";

$("#scarves").hide();
$("#pants").hide();
$("#jw").hide();
$("#sand").hide();
$("#lapy").hide();
$("#cam").hide();
$("#mob").hide();
$("#bag").hide();
$("#glass").show(function(){

rates=document.getElementsByName('lap');
for(var i=0;i<rates.length;i++)
{
rates[i].checked=false;
}
});



$.ajax({
        type:'GET',
        url:'alldisplay.php',
        data:"prodtype="+prodtype,
        success:function(response){
        document.getElementById("right").innerHTML=response;
        }
        });
});


$("#left").click(function(){
rates = document.getElementsByName('lap');
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
        alert(rate_value);
        $.ajax({
        type:'GET',
        url:'branddisplay.php',
        data:'brand='+rate_value+"&prodtype="+prodtype,
        success:function(response){
        document.getElementById("right").innerHTML=response;
        }
        });
    }
}

});

});

</script>

<center>
<div id="menu" style="font-size:20px;text-decoration:none;height:30px;width:800px;background-color:#A0A0A0 ">
<span id="lap1">laptop&nbsp&nbsp&nbsp</span>
<span  id="came">camera&nbsp&nbsp&nbsp</span>
<span  id="mobi">mobile&nbsp&nbsp&nbsp</span>
<span  id="scrv">Scarves&nbsp&nbsp&nbsp</span>
<span  id="bagg">Bag&nbsp&nbsp&nbsp</span>
<span  id="glasss">Glass&nbsp&nbsp&nbsp</span>

</div>
</center><br>
<div id="left" style="float:left;text-decoration:none;height:1000px;width:200px;background-color:#66CCFF ">
<div id="lapy">

<form name="input"  method="get">
<input type="radio" name="lap" value="sony" /> sony<br />
<input type="radio" name="lap" value="samsuze" /> samsuze<br />
<input type="radio" name="lap" value="sony " /> sony<br />
<input type="radio" name="lap" value="tosiba" /> tosiba<br />
</form> 
</div>
<div id="cam">

<form name="input"  method="get">
<input type="radio" name="lap" value="sony" /> sony<br />
<input type="radio" name="lap" value="niccon" /> niccon<br />
<input type="radio" name="lap" value="fijjj" /> fijjj<br />

</form>
</div>
<div id="mob">

<form name="input"  method="get">
<input type="radio" name="lap" value="lg" /> lg<br />
<input type="radio" name="lap" value="samsuze" /> samsuze<br />
<input type="radio" name="lap" value="samsuze" /> samsuze<br />
</form>
</div>
<div id="scarves">

<form name="input"  method="get">
<input type="radio" name="lap" value="simple" /> simple<br />
<input type="radio" name="lap" value="cool" />cool <br />
<input type="radio" name="lap" value="curvi" /> carvi<br />
<input type="radio" name="lap" value="cafu" /> cafu<br />
</form>
</div>
<div id="bag">
<form>
<input type="radio" name="lap" value="Bag1" /> Bag1<br />
<input type="radio" name="lap" value="Bag2" />Bag2 <br />
<input type="radio" name="lap" value="Bag3" /> Bag3<br />
<input type="radio" name="lap" value="Bag4" /> Bag4<br />
</form>
</div>
<div id="glass">

<form name="input"  method="get">
<input type="radio" name="lap" value="reben1" /> reben1<br />
<input type="radio" name="lap" value="reben2" />reben2 <br />
<input type="radio" name="lap" value="reben3" /> reben3<br />
<input type="radio" name="lap" value="reben4" /> reben4<br />
</form>
</div>

<div id="pants">

<form name="input"  method="get">
<input type="radio" name="lap" value="levis" /> levis <br />
<input type="radio" name="lap" value="gazz" />gazz <br />
<input type="radio" name="lap" value="disel" /> disel <br />
<input type="radio" name="lap" value="killer" /> killer <br />
</form>
</div>

<div id="jw">

<form name="input"  method="get">
<input type="radio" name="lap" value="gold" /> gold<br />
<input type="radio" name="lap" value="gold" />gold <br />

</form>
</div>
<div id="sand">

<form name="input"  method="get">
<input type="radio" name="lap" value="parago" />  paragon <br />
<input type="radio" name="lap" value="paragon" />  paragon <br />


</form>
</div>

</div >
<center>
<div id="right" style="margin-left:40px;float:left;text-decoration:none;height:900px;width:900px;background-color:#FFFFFF">
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("seo",$con);
$sql="SELECT * FROM search";
$response=mysql_query($sql,$con);

echo "<table border='1'> ";
while($row=mysql_fetch_array($response))
{

echo "<tr><td>Product name:".$row['pname']."<br>Product Type:".$row['ptype']."<br>City Name:".$row['cname'];

echo "<td><img style='margin-left:50px;margin-right:50px;height:100px;width:100px' src='upload/".$row['pimg']."'/></tr>";
//echo $row['pimg'];
}

echo "</table>";
 ?>
</div></center>

i did this way. refer if you like....

Answer 4

Since document.getElementsByClassName("adminCheckBox") returns an array, the checked property will not be defined. Consider using document.getElementsByClassName("adminCheckBox")[0] or iterating through the array properly.

Answer 5

I strongly recommend just using .toggle() instead for this. Shorten up the code a lot just with that. Also, you can further optimize it just by giving all those elements a same class, if you want.

$(".adminCheckbox").click(function(){

    $(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle();

}); 

You can also place a number value for toggle to do an animation on hide and show, like .toggle(500)