jQuery 计算表

Question

我认为我的问题是最明显的。我想创建一个订单表，在最后给出某件商品将花费的金额。在这一刻，我开始使用 html 和 jquery 函数。

现在我的问题：

你觉得代码怎么样，有没有办法让它变得更好？
我如何创建检查选择了哪个部分的函数并且
然后将正确的价格添加到全额？
我的变量不是全局的，这是个问题吗？

$('input[name="ifCMS"]').change(function(){
 var grabVal = $(this).val();
  if(grabVal == "ifCMSyes"){
   $("#ifCMSyes").show();
   $("#ifCMSno").hide();
  }else{
   $("#ifCMSyes").hide();
   $("#ifCMSno").show();
            $("#chooseLAYOUTcontao").hide();
      $("#chooseLAYOUTjoomla").hide();
      $("#chooseLAYOUTwordpress").hide();
  }
});


$('input[name="chooseCMS"]').change(function(){
 var grabVal = $(this).val();
 if(grabVal == "Contao"){
  $("#chooseCMScontao").show();
  $("#chooseCMSjoomla").hide();
  $("#chooseCMSwordpress").hide();
  $("#chooseCMSandere").hide();
  $("#chooseCMSno").hide();
 }else if(grabVal == "Joomla"){
  $("#chooseCMScontao").hide();
  $("#chooseCMSjoomla").show();
  $("#chooseCMSwordpress").hide();
  $("#chooseCMSandere").hide();
  $("#chooseCMSno").hide();
 }else if(grabVal == "Wordpress"){
  $("#chooseCMScontao").hide();
  $("#chooseCMSjoomla").hide();
  $("#chooseCMSwordpress").show();
  $("#chooseCMSandere").hide();
  $("#chooseCMSno").hide();
 }else if(grabVal == "Anderes"){
  $("#chooseCMScontao").hide();
  $("#chooseCMSjoomla").hide();
  $("#chooseCMSwordpress").hide();
  $("#chooseCMSandere").show();
  $("#chooseCMSno").hide();
 }else if(grabVal == "Keine Präferenz"){
  $("#chooseCMScontao").hide();
  $("#chooseCMSjoomla").hide();
  $("#chooseCMSwordpress").hide();
  $("#chooseCMSandere").hide();
  $("#chooseCMSno").show();
 }
});

$('input[name="chooseCMS"]').change(function(){
 var grabVal = $(this).val();
 if(grabVal == "Contao"){
  $("#chooseLAYOUTcontao").show();
  $("#chooseLAYOUTjoomla").hide();
  $("#chooseLAYOUTwordpress").hide();
 }else if(grabVal == "Joomla"){
  $("#chooseLAYOUTcontao").hide();
  $("#chooseLAYOUTjoomla").show();
  $("#chooseLAYOUTwordpress").hide();
 }else if(grabVal == "Wordpress"){
  $("#chooseLAYOUTcontao").hide();
  $("#chooseLAYOUTjoomla").hide();
  $("#chooseLAYOUTwordpress").show();
    }else{
        $("#chooseLAYOUTcontao").hide();
  $("#chooseLAYOUTjoomla").hide();
  $("#chooseLAYOUTwordpress").hide();
    }
});

.ifCMS{
    display:none;

}
.chooseCMS {
    display: none;
}
.chooseLAYOUT {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
 <tr>
     <td width="20%">Wünschen Sie ein CMS oder eine statische Seite?</td>
         <td width="30%">
          <input type="radio" name="ifCMS" value="ifCMSyes"> CMS<br />
             <input type="radio" name="ifCMS" value="ifCMSno"> Statisch
        </td>
      <td width="50%">CMS steht für Conent-Management-System und bedeutet, dass es ihnen möglich ist Beiträge oder Änderungen mit einen relativ geringen Aufwand vorzunehmen.</td>
    </tr> 
    <tr id="ifCMSno" class="ifCMS">
     <td></td>
     <td>Da Ihre Produktwahl sehr spezifisch ist, ist es nicht möglich eine Offerte zu erstellen. Bitte nehmen Sie Kontakt mit uns auf.</td>
        <td> </td>
   </tr>
   <tr id="ifCMSyes" class="ifCMS">
     <td>Welches CMS hätten Sie gerne?</td>
     <td>
         <input type="radio" name="chooseCMS" value="Contao"> Contao<br />
            <input type="radio" name="chooseCMS" value="Joomla"> Joomla<br />
            <input type="radio" name="chooseCMS" value="Wordpress"> Wordpress<br />
            <input type="radio" name="chooseCMS" value="Anderes"> Anderes<br />
            <input type="radio" name="chooseCMS" value="Keine Präferenz"> Keine Präferenz<br />
        </td>
        <td id="chooseCMScontao" class="chooseCMS">Contao</td>
        <td id="chooseCMSjoomla" class="chooseCMS">Joomla</td>
        <td id="chooseCMSwordpress" class="chooseCMS">Wordpress</td>
        <td id="chooseCMSandere" class="chooseCMS">Anderes</td>
        <td id="chooseCMSno" class="chooseCMS">Keine Präferenz</td>
                </tr>
        <tr id="chooseLAYOUTcontao" class="chooseLAYOUT">
            <td>Wählen Sie ein Grundlayout</td>
            <td><input type="radio" name="chooseLAYOUTcontao" value="simpler"> Simpler<br />
                <input type="radio" name="chooseLAYOUTcontao" value="simpler"> Host-Cocco<br />
                <input type="radio" name="chooseLAYOUTcontao" value="individuell"> Individuell<br />
                <input type="radio" name="chooseLAYOUTcontao" value="eigenes"> Eigenes
            </td>
             <td></td>
        </tr>
                
         <tr id="chooseLAYOUTjoomla" class="chooseLAYOUT">
            <td>Wählen Sie ein Grundlayout</td>
            <td><input type="radio" name="chooseLAYOUTjoomla" value="zhong"> Zhong<br />
                <input type="radio" name="chooseLAYOUTjoomla" value="individuell"> Individuell<br />
                <input type="radio" name="chooseLAYOUTjoomla" value="eigenes"> Eigenes
            </td>
             <td></td>
        </tr>
                
                         <tr id="chooseLAYOUTwordpress" class="chooseLAYOUT">
            <td>Wählen Sie ein Grundlayout</td>
            <td>                <input type="radio" name="chooseLAYOUTwordpress" value="individuell"> Individuell<br />
                <input type="radio" name="chooseLAYOUTwordpress" value="eigenes"> Eigenes
            </td>
             <td></td>
        </tr>

</table>

非常感谢您的帮助

Answer 1

试试这个短代码：

更新

只需在顶部的 else 块中添加 $(".chooseLAYOUT").hide(); 这一行..

$('input[name="ifCMS"]').change(function() {
  var grabVal = $(this).val();
  if (grabVal == "ifCMSyes") {
    $("#ifCMSyes").show();
    $("#ifCMSno").hide();
  } else {
    $("#ifCMSyes").hide();
    $("#ifCMSno").show();
    $(".chooseLAYOUT").hide();//just add here this line..

  }
});


$('input[name="chooseCMS"]').change(function() {
  var grabVal = $(this).val();
  $("#chooseCMS").html($(this).val())
});
$('input[name="chooseCMS"]').change(function() {
  var grabVal = $(this).val();
  if (grabVal == "Contao") {
    $("#chooseLAYOUTcontao").show();
    $("#chooseLAYOUTjoomla").hide();
    $("#chooseLAYOUTwordpress").hide();
  } else if (grabVal == "Joomla") {
    $("#chooseLAYOUTcontao").hide();
    $("#chooseLAYOUTjoomla").show();
    $("#chooseLAYOUTwordpress").hide();
  } else if (grabVal == "Wordpress") {
    $("#chooseLAYOUTcontao").hide();
    $("#chooseLAYOUTjoomla").hide();
    $("#chooseLAYOUTwordpress").show();
  } else {
    $("#chooseLAYOUTcontao").hide();
    $("#chooseLAYOUTjoomla").hide();
    $("#chooseLAYOUTwordpress").hide();
  }
});

.ifCMS {
  display: none;
}
.chooseCMS {
  display: none;
}
.chooseLAYOUT {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td width="20%">Wünschen Sie ein CMS oder eine statische Seite?</td>
    <td width="30%">
      <input type="radio" name="ifCMS" value="ifCMSyes">CMS
      <br />
      <input type="radio" name="ifCMS" value="ifCMSno">Statisch
    </td>
    <td width="50%">CMS steht für Conent-Management-System und bedeutet, dass es ihnen möglich ist Beiträge oder Änderungen mit einen relativ geringen Aufwand vorzunehmen.</td>
  </tr>
  <tr id="ifCMSno" class="ifCMS">
    <td></td>
    <td>Da Ihre Produktwahl sehr spezifisch ist, ist es nicht möglich eine Offerte zu erstellen. Bitte nehmen Sie Kontakt mit uns auf.</td>
    <td></td>
  </tr>
  <tr id="ifCMSyes" class="ifCMS">
    <td>Welches CMS hätten Sie gerne?</td>
    <td>
      <input type="radio" name="chooseCMS" value="Contao">Contao
      <br />
      <input type="radio" name="chooseCMS" value="Joomla">Joomla
      <br />
      <input type="radio" name="chooseCMS" value="Wordpress">Wordpress
      <br />
      <input type="radio" name="chooseCMS" value="Anderes">Anderes
      <br />
      <input type="radio" name="chooseCMS" value="Keine Präferenz">Keine Präferenz
      <br />
    </td>
    <td id="chooseCMS"></td>
    <!--<td id="chooseCMScontao" class="chooseCMS">Contao</td>
    <td id="chooseCMSjoomla" class="chooseCMS">Joomla</td>
    <td id="chooseCMSwordpress" class="chooseCMS">Wordpress</td>
    <td id="chooseCMSandere" class="chooseCMS">Anderes</td>
    <td id="chooseCMSno" class="chooseCMS">Keine Präferenz</td>-->
  </tr>
  <tr id="chooseLAYOUTcontao" class="chooseLAYOUT">
    <td>Wählen Sie ein Grundlayout</td>
    <td>
      <input type="radio" name="chooseLAYOUTcontao" value="simpler">Simpler
      <br />
      <input type="radio" name="chooseLAYOUTcontao" value="simpler">Host-Cocco
      <br />
      <input type="radio" name="chooseLAYOUTcontao" value="individuell">Individuell
      <br />
      <input type="radio" name="chooseLAYOUTcontao" value="eigenes">Eigenes
    </td>
    <td></td>
  </tr>

  <tr id="chooseLAYOUTjoomla" class="chooseLAYOUT">
    <td>Wählen Sie ein Grundlayout</td>
    <td>
      <input type="radio" name="chooseLAYOUTjoomla" value="zhong">Zhong
      <br />
      <input type="radio" name="chooseLAYOUTjoomla" value="individuell">Individuell
      <br />
      <input type="radio" name="chooseLAYOUTjoomla" value="eigenes">Eigenes
    </td>
    <td></td>
  </tr>

  <tr id="chooseLAYOUTwordpress" class="chooseLAYOUT">
    <td>Wählen Sie ein Grundlayout</td>
    <td>
      <input type="radio" name="chooseLAYOUTwordpress" value="individuell">Individuell
      <br />
      <input type="radio" name="chooseLAYOUTwordpress" value="eigenes">Eigenes
    </td>
    <td></td>
  </tr>

</table>

jQuery 计算表

jQuery calucation form

html

javascript

forms

jquery