Show options to customize budget

Question

Show options to customize budget

Asked 11 years, 5 months ago

Viewed 344 times

2

I need to show the user the possibility to customize a budget, but I’m not able to show the options, only works the first, I’m using this code within a while php.

What I got is this:

THE HTML

<!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" />
<title>Untitled Document</title>
</head>

<body>
<form>
  <table width="100%" border="0">
    <tr>
      <td>Equipamento Analitico E.T.A</td>
    </tr>
  </table>
  <input type="checkbox" name="opcao" value="1" class="personalizar">
  Sim
  <div class="orcamento" style="display: none;">
    <table width="100%" border="0">
      <tr>
        <td>&nbsp;</td>
        <td><input name="Sistema Supervisório" type="checkbox" value="Sistema Supervisório" />
          Sistema Supervisorio</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Analisador de PH" type="checkbox" value="Analisador de PH" />
          Analisador de PH </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Monitor de Coagulante" type="checkbox" value="Monitor de Coagulante" />
          Monitor de Coagulante </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Turbidímetro de Entrada" type="checkbox" value="Turbidímetro de Entrada" />
          Turbidímetro de Entrada</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Leitura de Vazao Via IHM" type="checkbox" value="Leitura de Vazao Via IHM" />
          Leitura de Vazao Via IHM </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Analisador de Cloro" type="checkbox" value="Analisador de Cloro" />
          Analisador de Cloro </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Analisador de Fluor" type="checkbox" value="Analisador de Fluor" />
          Analisador de Fluor </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input type="checkbox" name="doseeta" value="1" class="dosadoras">
          Bombas Dosadoras</td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </div>
    <div class="dose" style="display: none;">
    <table width="100%" border="0">
      <tr>
        <td>&nbsp;</td>
        <td><input name="Cloro" type="checkbox" value="Cloro" />
          Cloro</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Fluor" type="checkbox" value="Fluor" />
          Fluor </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Coagulante" type="checkbox" value="Coagulante" />
          Coagulante </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Acidulante (Acido)" type="checkbox" value="Acidulante (Acido)" />
          Acidulante (Acido)</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><input name="Alcalinizante (Soda)" type="checkbox" value="Alcalinizante (Soda)" />
          Alcalinizante (Soda)</td>
        <td>&nbsp;</td>
      </tr> 
    </table>
  </div>
</form>

</body>
</html>


$(document).ready(function(){

    $(".personalizar").click(function(evento){
        if ($(".personalizar").attr("checked")){
            $(".orcamento").css("display", "block");
        }else{
            $(".orcamento").css("display", "none");
        }
    });
});

$(document).ready(function(){
    $(".dosadoras").click(function(evento){
        if ($(".dosadoras").attr("checked")){
            $(".dose").css("display", "block");
        }else{
            $(".dose").css("display", "none");
        }
    });
});`

How can I show the options?

1

Post the HTML under which Javascript is operating.

– Bruno Augusto

2014/05/14 at 18:01
Need to edit and make more clear what you are trying to do, preferably post your php code too

– RodrigoBorth

2014/05/14 at 18:07
How do I post an HTML content? I’m unable to perform this operation.

– adventistapr

2014/05/14 at 18:09
To format code select it and click the button { }

– rray

2014/05/14 at 18:10

1 answer

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Sergio • **133,294** points · Answer 1 · 2014-05-14T18:14:30+00:00

Use

if (this.checked) {

instead of

if ($(".minhaClasse").attr("checked")){

I could also use the .prop("checked"), which is the current/substitute solution for .attr() since version 1.6.

Changing that your code already works: http://jsfiddle.net/7jGTJ/

$(document).ready(function () {

    $(".personalizar").click(function (evento) {console.log(1)
        if (this.checked) {
            $(".orcamento").css("display", "block");
        } else {
            $(".orcamento").css("display", "none");
        }
    });

    $(".dosadoras").click(function (evento) {
         if (this.checked) {
            $(".dose").css("display", "block");
        } else {
            $(".dose").css("display", "none");
        }
    });
});

Note who had twice $(document).ready(){, I made it simple for one.

Note also Do not forget to include this code in your jQuery library. Do not forget to include this code in the tag <head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Extra note: can still use the $(this).is(':checked') but this method is more useful when you need to use a selector to find the element. Here as we already have the this then pure javascript is the fastest and simplest.
_{Thanks @Bruno Augusto remember the .is()}