Member Avatar for PF2G

Hi,

I'm working on a website where i have the list of all products and its info: image, description, reference and a button to see more images of the product. I want to create a checkbox that when is checked all the info is hidden except the image.

I'm using this code but the effect doesn't work. Can someone help me?

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" type="image/x-icon" href="imagens/plasticos.ico" />
        <link href="styles/style.css" rel="stylesheet" />
        <title>Plásticos Futura - Produtos</title>
        <script type="text/javascript" src="js/java.js"></script>
<!------------------------------------------------------------------------------>       
        <script language="javascript/jquery">
                function validate(chk)
                {
                        if (chk.checked == 1)
                        {
                                $("button").click(function()
                                {
                                        $("p").hide(1000);
                                });

                        }
                }
        </script>

</head>


<!------------------------------------------------------------------------>     
<p>     

<td valign="top" class="texto_pretobig2"><strong>REFERÊNCIA: </strong><?php echo $row_produtos['referencia']; ?><br />
                                                                                                <strong>DESCRIÇÃO:</strong> <?php echo $row_produtos['nome']; ?>
                                                                                                        <br/>
        <br/>
                                                                                                        <div id="a_img">
                                                                                                        <a href="ver_produto.php?id_produto=<?php echo $row_produtos['id_produto']; ?>&id_categoria=<?php echo $row_produtos['id_material']; ?>" class="a_img">Mais imagens</a>
                                                                                                        </div>
                                                                                                </p>
<!------------------------------------------------------------------------>     
                                                                                                <br/>
<form>
<input type="checkbox" name="chk1"> Esconder Info</input>
<br/>
<button type="button" onclick="return validate(chk1);">Submeter</button>
</form>
  • 2 Contributors
  • 5 Replies
  • 268 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for stbuchok

Try the following instead (untested):

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" type="image/x-icon" href="imagens/plasticos.ico" />
        <link href="styles/style.css" rel="stylesheet" />
        <title>Plásticos Futura - Produtos</title>
        <script type="text/javascript" src="js/java.js"></script>
<!------------------------------------------------------------------------------>       
        <script language="javascript/jquery">
            $(function(){
                $('button').click(function(){
                    if($('chk1').attr('checked')){
                        $('p').hide(1000);
                    }
                });
            });
        </script>
</head>
<!------------------------------------------------------------------------>     
<p>     
<td valign="top" class="texto_pretobig2"><strong>REFERÊNCIA: </strong><?php echo $row_produtos['referencia']; ?><br />
                                                                                                <strong>DESCRIÇÃO:</strong> <?php echo $row_produtos['nome']; ?>
                                                                                                        <br/>
        <br/>
                                                                                                        <div id="a_img">
                                                                                                        <a href="ver_produto.php?id_produto=<?php echo $row_produtos['id_produto']; ?>&id_categoria=<?php echo $row_produtos['id_material']; ?>" class="a_img">Mais imagens</a>
                                                                                                        </div>
                                                                                                </p>
<!------------------------------------------------------------------------>     
                                                                                                <br/>
<form>
<input type="checkbox" id="chk1"> Esconder Info</input>
<br/>
<button type="button">Submeter</button>
</form>
Member Avatar for PF2G

Damn it. Nothing happens.

I have this one:

<br/>
<input type="checkbox" id="validchk" name='exp6'/>Esconder/Mostrar<br/>
<input type="button" value="Submeter" id='ischecked' />
<script>
// Validate checkbox is checked
$('#ischecked').click(function()
{
if($('#validchk').is(':checked')) 
{
$("p").hide(1000);
}
else
{
}
});
</script>

And my browser breaks, because of a script problem.

Member Avatar for stbuchok

Are you referencing the JQuery library?

Member Avatar for PF2G

Yes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" type="image/x-icon" href="imagens/plasticos.ico" />
    <link href="styles/style.css" rel="stylesheet" />
    <title>Plásticos Futura - Produtos</title>
    <script type="text/javascript" src="js/java.js"></script>
    <script type='text/javascript' src='jquery/jquery.js'></script>
</head>
Member Avatar for stbuchok

In my previous example this:

if($('chk1').attr('checked')){

should be changed to:

if($('#chk1').attr('checked')){
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.