Show options to customize budget

Question

Show options to customize budget

Navigation

#1 by (3 votes)

2

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

What I have is this:

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

javascript jquery

asked by anonymous 14.05.2014 / 19:55

1 answer

Which class identifier should I use? Error writing client tab in V10 user fields

score 3 · Accepted Answer

Use

if (this.checked) {

instead of

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

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

Changing this your code already works: link

$(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 that had twice $(document).ready(){ , I simplified to one.

Note also that in your code I do not see where the jQuery library is loading. Do not forget to include this code inside the <head> tag:

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

Extra note: can still use $(this).is(':checked') but this method is most useful when you need to use a selector to find the element. Here's how we already have this so pure javascript is the fastest and easiest.
Thanks @Bruno Augusto remember .is()