[英]javascript/jquery - hide/show table row if radio buttons checked
我对 js 和 jQuery 很陌生。
我有一个简单的引导表。 在两行中,我有单选按钮,一个用于项目 1a,另一个用于项目 2a。 我还有另外两行,类别为 price-1 和 price-2。 我最初隐藏了 price-2(class="hidden"),所以唯一可见的行是 price-1。
我想使用 js 或 jQuery 来显示/隐藏 .price-1 和 .price-2 取决于选择的收音机。 因此,如果选择了 Item 1a (id="radioItem1) 的收音机,我希望 .price-1(Item 1 行)可见,而 .price-2(Item 2 行)隐藏。如果 Item 2a 的收音机( id="radioitem2) 被选中,我希望 .price-2(项目 2 行)变得可见并隐藏 .price-1(项目 1 行)。 一次只能看到其中一个
最终,我将使引导表行可点击,因此如果有人点击该行(而不是收音机),它将选择收音机。 因此,如果可能的话,我希望 js 查看无线电是否真的被“检查”(未点击),因为我想删除任何可能的人为错误组件,用户可能会不小心在一行上单击两次,这基本上会切换单击事件两次。 我认为 on.click 功能非常适用于复选框,但不一定适用于收音机。
我怎样才能做到这一点?
HTML:
<div class="selects-1 col-xs-5"> <select id="licenseRegs" class="form-control selectPCs" name="licenseRegs" style="width: 50%;"> <option value="5" selected="selected" prodid="43" price="49.99" productname="product1">5 </option> <option value="10" prodid="44" price="99.99" productname="product1">10 </option> <option value="15" prodid="56" price="149.99" productname="product1">15 </option> <option value="20" prodid="68" price="199.99" productname="product1">20 </option> <option value="25" prodid="54" price="299.99" productname="product1">25 </option> <option value="50" prodid="45" price="599.99" productname="product1">50 </option> <option value="75" prodid="62" price="899.99" productname="product1">75 </option> <option value="100" prodid="53" price="1199.99" productname="product1">100 </option> <option value="125" prodid="78" price="1499.99" productname="product1">125 </option> </select> </div> <div class="orderTotal"> <h4>Order Total:</h4> <table id="tableOrderTotal" class="table tableTotal"> <tbody> <tr class="rowAnnual"> <td><label class="active"><input type="radio" id="radioItem1" name="productOptionItem" value="oneYear" checked></label></td> <td>Item 1a </td> </tr> <tr class="row2Annual"> <td><label><input type="radio" id="radioItem2" name="productOptionItem" value="twoYear" ></label></td> <td>Item 2a </td> </tr> <tr id="addItem1"> <td>Item 1 row</td> <td class="price-1"></td> </tr> <tr id="additem2" class="hidden"> <td>Item 2 row</td> <td class="price-2"><span class="dollars">13</span></td> </tr> </tbody> </table> </div>
这是我的 jsfiddle 的链接,我正在玩我正在尝试做的事情。 https://jsfiddle.net/dhs3gphz/6/
这是您的解决方案: jsFiddle
$(document).ready(function() {
var pricePerRegUnder = 10;
var pricePerRegAbove = 12;
var licenseRegsSelect = $('#licenseRegs');
function updateTotalPrice() {
licenseRegs = parseInt(licenseRegsSelect.val(), 10);
var total;
if (licenseRegs < 25) {
total = licenseRegs * pricePerRegUnder;
} else {
total = licenseRegs * pricePerRegAbove;
}
$('.price-1').html(total);
}
licenseRegsSelect.change(function() {
updateTotalPrice();
});
$('.rowAnnual').click(function(){
$(this).find('input').prop('checked', true);
if($(this).find('input').attr('id')=='radioItem1'){
$('#addItem1').removeClass('hidden');
$('#addItem2').removeClass().addClass('hidden');
}
else{
$('#addItem1').removeClass().addClass('hidden');
$('#addItem2').removeClass('hidden');
}
});
updateTotalPrice();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.