问题
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 & 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 & 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>
回答1:
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.
来源：https://stackoverflow.com/questions/12680111/jquery-show-hide-element-on-multiple-radio-button-selection