1

我对 Web 开发非常陌生，如果你甚至可以这样称呼它，尤其是 jQuery，我已经用 jQuery 碰了壁。

我拥有的是一个表格（用于选择目的）和一系列 Paypal 按钮。我需要执行的功能是显示/隐藏，但前提是选择了三个单选按钮的特定选择。每三个组合选择是显示/隐藏相应的贝宝按钮。

我可以通过单一形式的单选选择很好地显示/隐藏，但不能用于组合。

你必须原谅我的白菜编码，因为我仍然只是一个初学者，代码可以优化很多，谢天谢地，它只是一个低流量的网站/小市场。对任何可以帮助我的人表示敬意。

已经设法很好地隐藏了所有按钮。下面的脚本

<script type="text/javascript">

$(document).ready(function(){

    //Hide div w/id extra
         $("#button1,#button2,#button3,#button4,#button5,
             #button6,#button7,#button8,#button9,#button10,
             #button11, #button12, #button13, #button14,#button15,
             #button16,#button17,#button18,#button19,#button20,
              #button21,#button22,#button23,#button24,                 
              #button25,#button26,#button27").css("display","none");

});

</script>

这是表单html

    <form action="order-lamb" method="post" id="order">
   <input type="hidden" name="pack" value="whole" />
   <div class="form-item leg option left2">
      <h3> Choose from the following Leg options</h3>
      <p>Choose what leg options you would like:</p>
      <label for="leg-one-of-each"><input type="radio" name="leg" value="each" id="leg-one-of-each" />1 x Carvery and 1 x Butterfly Legs</label>
      <p class="or">OR</p>
      <label for="leg-both-carvery"><input type="radio" name="leg" value="carvery" id="leg-both-carvery" />2 x Carvery Legs</label>
      <p class="or">OR</p>
      <label for="leg-both-butterfly"><input type="radio" name="leg" value="butterfly" id="leg-both-butterfly" /> 2 x Butterfly Legs</label>
   </div>
   <div class="form-item loin option right2 ">
      <h3> Choose from the following Loin options:</h3>
      <p>Choose what loin options you would like:</p>
      <label for="loin-one-of-each"><input type="radio" name="loin" value="loin-each" id="loin-one-of-each" />1 x Nolsette Loin and 1 x Backstrap &amp; Tenderloin</label>
      <p class="or">OR</p>
      <label for="loin-both-nolsette"><input type="radio" name="loin" value="nolsette" id="loin-both-nolsette" />2 x Nolsette Loins </label>
      <p class="or">OR</p>
      <label for="loin-both-backstrap"><input type="radio" name="loin" value="backstrap-tenderloin" id="loin-both-backstrap" />2 x Backstrap &amp; Tenderloins </label>
   </div>
   <div class="cf"></div>
   <div class="form-item shoulder option left2">
      <h3>Choose from the following Shoulder options:</h3>
      <p>Choose what shoulder option you would like:</p>
      <label for="shoulder-one-of-each"><input type="radio" name="shoulder" value="shoulder-each" id="shoulder-one-of-each" /> 1 x Bone and Rolled and 1 x French Danish</label>
      <p class="or">OR</p>
      <label for="shoulder-both-bone-and-rolled"><input type="radio" name="shoulder" value="bone-and-rolled" id="shoulder-both-bone-and-rolled" />2 x Bone and Rolled</label>
      <p class="or">OR</p>
      <label for="shoulder-both-french-danish"><input type="radio" name="shoulder" value="french-danish" id="shoulder-both-french-danish" />2 x French Danish</label>
   </div>
   <div class="form-item included right2">
      <h3>You will also get:</h3>
      <p>These are included:</p>
      <span class="choice selected">2 x Fully Frenched Racks </span>
      <p class="or">AND</p>
      <span class="choice selected">1 x Coastal Spring Lamb Mince Pack </span> </span>    
      <p class="or">AND</p>
      <span class="choice selected">1 x Coastal Spring Lamb Patty Pack</span> </span>
   </div>
   <div class="clear"></div>
   <div class="align-right" />
   <div class="form-item submit">
      <p class="error">You must select an option in each category.</p>
      <input type="image" name="submit" src="images/buttons-and-logos/awaiting-payment.png" id="submit" border="0" />
      <p class="paypal">You will receive a confirmation email when your payment has been processed via paypal. <br />Price includes freight and GST.<br /></p>
   </div>
</form>
4

1 回答 1

1

首先，您应该为这些按钮创建一个类，这将使您的代码更容易保持清洁并减少您的工作量。它会是这样的。

在您的按钮创建中。

<input type="button" class="hideMe">

然后在 CSS 文件中，您将拥有如下内容

.hideMe{
     display:none;
}

或者，如果您不想要单独的 CSS 文件，您也可以在您的 javascript 部分中执行以下操作。

<script type="text/javascript">
$(document).ready(function(){
     //Hide div w/id extra
     $(".hideMe").css("display","none");

});
</script>

无论如何，沿着这些路线。

其次，要回答您的主要问题，您始终可以检查最后一个按钮，以确保所有 3 个都被选中。

$('input:radio[name="yourRadioNameHere"]').change(function(){
       if ($(this).is(':checked') && $(radioButton2).is(':checked')  && $(radioButton2).is(':checked') ) {
         // Do whatever you need to do here
       }
});

我确信那里有一个更优雅的解决方案，但是我现在很累，即将结束这一天，哈哈。但这应该有效。

希望这可以帮助！

编辑：要让它在所有 3 个复选框上工作，您需要执行 3 个 if 语句。但是，为了节省重复代码，请创建一个函数来为您执行检查。例如

    function checkChecked(){
           if ($(this).is(':checked') && $(radioButton2).is(':checked')  && $(radioButton2).is(':checked') ) {
         // Do whatever you need to do here
       }
    }

然后，您将拥有 3 个调用此函数的 if 语句。下面是一个例子。

       $('input:radio[name="yourRadioNameHere"]').change(function(){
       checkCheck();
});

正如我所说，那里有更多可能更优雅的解决方案，但这将完成您所寻找的工作。例如，我很确定那里有一些功能可以检查是否更改了任何复选框，这将为您节省 3 个 if 语句。但是，我将把谷歌搜索留给你:)。

希望额外的代码有所帮助。

于 2012-10-01T20:09:45.117 回答