Question

我对网络开发很陌生，如果你甚至可以称之为，尤其是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>

Answer 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语句。但是我会把谷歌搜索留给你:)。

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

多个单选按钮选择中的jquery show / hide元素

1 个答案: