jQuery的多个单选按钮选择显示/隐藏元素 [英] jquery show/hide element on multiple radio button selection

查看：127
本文介绍了jQuery的多个单选按钮选择显示/隐藏元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对web开发很陌生，如果你甚至可以这么称呼它的话，特别是jQuery和我用jQuery碰到了一堵墙。



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



我可以通过单一表格广播选择显示/隐藏，但不能用于组合。



您我不得不原谅我的白菜编码，因为我仍然只是一个初学者，代码可能会更加优化，幸运的是，它只是一个低流量网站/小市场进入。很荣幸任何人都可以帮助我。 p>

设法隐藏了所有的按钮。下面的脚本

 < script type =text / javascript> 
 $ b $（document）.ready（function（）{
 
 //隐藏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-lambmethod =postid =order> 
< input type =hiddenname =packvalue =whole/> 
< div class =form-item leg option left2> 
< h3>从以下Leg选项中选择< / h3> 
< p>选择您喜欢的选项：< / p> 
< label for =leg-one-of-each>< input type =radioname =legvalue =eachid =leg-one-of-each/ > 1 x Carvery和1 x Butterfly Legs< / label> 
< p class =or> OR< / p>


解决方案

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



在你的按钮创建。

 < input type =buttonclass =hideMe>

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

  .hideMe {
 display：none; 
 
 $ / code>

或者如果你不想要一个CSS文件，你也可以按如下操作您的JavaScript部分。

 < script type =text / javascript> 
 $（document.ready）（function（）{
 //隐藏div w / id extra 
 $（。hideMe）。css（display，none）; 
 
}）; 
< / script>

不管怎么说。

其次，回答你的主要问题，你总是可以检查最后一个按钮，以确保检查所有3个。

  $（ 'input：radio [name =yourRadioNameHere]'）。change（function（）{
 if（$（this）.is（'：checked'）&& $（radioButton2）.is（' ：'&&& $（radioButton2）.is（'：checked'））{
 //做任何你需要做的事情
} 
}）;

我确定有一个更优雅的解决方案，但我现在很累，完成了一天的大声笑。但是，这应该工作。

希望这有助于！



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

 函数checkChecked（）{
 if（$（this）.is（'：checked'）& & $（radioButton2）.is（'：checked'）&& $（radioButton2）.is（'：checked'））{
 //做任何你需要做的事情
} 
}

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

  $（'input：radio [name =yourRadioNameHere]'）。change（function（）{
 checkCheck（）; 
}）;

正如我所说，那里可能会有更多优雅的解决方案，但这会得到您的期望完成。
例如，我非常肯定有那里的函数会检查是否有任何复选框被更改，这将为您节省3个if语句。不过，我会把谷歌搜索留给你：）。

希望额外的代码有帮助。

I'm very new to web development, if you can even call it that, especially jQuery and I've hit a brick wall with a jQuery.

What I have is a form(for selection purposes), and a series of Paypal buttons. The function I need to perform is a show/hide but only if a particular selection of three radio buttons has been selected. Each three combination selection is to show/hide a corresponding paypal button.

I can show/hide fine with a single form radio selection, but not for the combination.

You'll have to excuse my cabbage coding as I'm still only a beginner, the code could be alot more optimized, thankfully it's only a low traffic site/small market its going into.BIG kudos to anyone who can help me.

Have managed to hide all the buttons fine. Script below 

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

Here is the form 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>

解决方案

first off you should make a class for those buttons which would make your code easier to keep clean and less effort on your part. It would go something like this.

In your button creation.

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

Then in a CSS file you would have as follows

.hideMe{
     display:none;
}

Or if you dont want a CSS file seperate you can also do as follows in your javascript section.

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

});
</script>

Along those lines anyway.

Secondly, to answer your main question, you can always have a check on the last button to ensure all 3 are checked.

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

I am sure there is a more elegant solution out there however I am tired at the moment and just about to finish up for the day lol. But that should work.

Hope this helps!

EDIT: To get it working on all 3 checkboxes you would need to do 3 if statements. However to save repeating of code create a function to perform the checks for you. Eg

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

You would then have 3 if statements that call this function. An example below. 

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

As I said there are more then likely more elegant solutions out there but this will get what your looking for done. For example I am pretty sure there are functions out there that will check if any check box is changed which would save you the 3 if statements. However I shall leave that google search to you :).

Hope the extra code helps.

这篇关于jQuery的多个单选按钮选择显示/隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆