我需要能够使用三个单选按钮来确定哪个p在页面上显示。所有项目都是从数据库中查询的,所以没有固定的数字。如果可能的话,我想坚持使用javascript。这些都是在PHP代码中编写的
尝试使用以下命令:
<?php
//Javascript function to show selected duration price:
echo"<script>
function showPrice(duration)
{
if(duration == "1")
{
var a = document.querySelectorAll('p[id^=price1]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="block;";
}
}
else
{
var a = document.querySelectorAll('p[id^=price1]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="none;";
}
}
if(duration == "2")
{
var a = document.querySelectorAll('p[id^=price2]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="block;";
}
}
else
{
var a = document.querySelectorAll('p[id^=price2]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="none;";
}
}
if(duration == "3")
{
var a = document.querySelectorAll('p[id^=price3]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="block;";
}
}
else
{
var a = document.querySelectorAll('p[id^=price3]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="none;";
}
}
}
</script>
";
然后每个p将有6个价格选项,只有当相应的单选项被选中时才应该可见:
while($pack_row = mysql_fetch_array($packageResults))
{
echo"<div class=submenuContainer style="margin: 0px 0px 0px $leftMargin"."px; width: $product_params[linkContainerWidth]"."px;">";
echo"nnn <a class=submenu title="{$pack_row["package_name"]}" id='package_id' href="javascript:ajaxFunction({$pack_row["package_id"]},null);inPagePopup();" style="background-image: url('$link_bg_img'); height: $product_params[link_height]"."px; width: $product_params[link_width]"."px; ">";
echo"n</a>";
echo"n<span class=submenuExtraText>";
$pricesAry = price_calculator("{$pack_row["package_id"]}","","","");
echo"n <p style="float: left; text-align: left;"><input class="$radioInputStyle" type=radio name=leaseInfo[packageID] value={$pack_row["package_id"]}> SELECT</p>";
//P's hidden unless lease duration selected below
echo"n <p class='priceDisplay' id='price1".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][1]."</b></p>";
echo"n <p class='priceDisplay' id='price2".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][2]."</b></p>";
echo"n <p class='priceDisplay' id='price3".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][3]."</b></p>";
echo"n <p class='priceDisplay' id='price4".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][4]."</b></p>";
echo"n <p class='priceDisplay' id='price5".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][5]."</b></p>";
echo"n <p class='priceDisplay' id='price6".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][6]."</b></p>";
echo"n</span>";
echo"n</div>";
$ck++;
$t++;
}
这里是单选框:
echo"<b>How long?</b><br>";
echo"<input id=duration1 class=radio type=radio name=leaseInfo[duration] value="1" onClick="showPrice(1);"> 3     ";
echo"<input id=duration2 class=radio type=radio name=leaseInfo[duration] value="2" onClick="showPrice(2);" checked> 6     ";
echo"<input id=duration3 class=radio type=radio name=leaseInfo[duration] value="3" onClick="showPrice(3);"> 12     ";
echo"<br><br>";
?>
像这样?
JSFiddle
function showPrice(duration) {
var prices = document.getElementsByClassName('priceDisplay');
for (var i = 0; i < prices.length; i++) {
var price = prices[i];
if (price.classList.contains('p'+ duration))
price.style.display = "block";
else
price.style.display = "none";
}
}
<input id=duration1 class=radio type=radio name=leaseInfo[duration] value="1" onClick="showPrice(1)" checked><label for=duration1> Price 1</label>
<input id=duration2 class=radio type=radio name=leaseInfo[duration] value="2" onClick="showPrice(2)"><label for=duration2> Price 2</label>
<input id=duration3 class=radio type=radio name=leaseInfo[duration] value="3" onClick="showPrice(3)"><label for=duration3> Price 3</label>
<h3>Item 1</h3>
<p class='priceDisplay p1' id='price1-i1'><b>Price1: $35.45</b></p>
<p class='priceDisplay p2' id='price2-i1' style='display: none;'><b>Price2: $22.45</b></p>
<p class='priceDisplay p3' id='price3-i1' style='display: none;'><b>Price3: $654.45</b></p>
<p class='priceDisplay p4' id='price4-i1' style='display: none;'><b>Price4: $11.45</b></p>
<p class='priceDisplay p5' id='price5-i1' style='display: none;'><b>Price5: $5.45</b></p>
<p class='priceDisplay p6' id='price6-i1' style='display: none;'><b>Price6: $77.45</b></p>
<h3>Item 2</h3>
<p class='priceDisplay p1' id='price1-i2'><b>Price1: $45.65</b></p>
<p class='priceDisplay p2' id='price2-i2' style='display: none;'><b>Price2: $12.45</b></p>
<p class='priceDisplay p3' id='price3-i2' style='display: none;'><b>Price3: $14.35</b></p>
<p class='priceDisplay p4' id='price4-i2' style='display: none;'><b>Price4: $32.46</b></p>
<p class='priceDisplay p5' id='price5-i2' style='display: none;'><b>Price5: $45.52</b></p>
<p class='priceDisplay p6' id='price6-i2' style='display: none;'><b>Price6: $99.76</b></p>