javascript/jquery-选中单选按钮时隐藏/显示表行

我对js和jQuery非常陌生

我有一个简单的引导表。在两行中，我有单选按钮，一个用于项目1a，另一个用于项目2a。我还有两行，分别是price-1和price-2。我正在隐藏price-2，最初class=hidden，因此唯一可见的行是price-1

我想使用js或jQuery显示/隐藏.price-1和.price-2，具体取决于选择的收音机。因此，如果选择了Item1a id=radioItem1的无线电，我希望.price-1 Item 1行可见，而.price-2 Item 2行隐藏。如果选择了项目2a id=放射性项目2的无线电，我希望.price-2项目2行变为可见并隐藏.price-1项目1行。一次只能看到其中一个

最终，我将使引导表行可单击，因此如果有人单击该行而不是收音机，它将选择收音机。因此，如果可能的话，我想让js看看是否实际检查了收音机而没有单击，因为我想删除任何可能的人为错误组件，其中用户可以意外地在一行上单击两次，这实际上会两次切换单击事件。我认为on.click功能对复选框非常有用，但对收音机来说不一定

我怎样才能做到这一点

HTML:

5. 10 15 20 25 50 75 100 125 订单总数： 项目1a 项目2a 项目1行 项目2第行 13 以下是您的解决方案：

---

谢谢Alexandru，这非常有效！最后一个问题。。。如果下拉菜单中的选择大于10，我将隐藏项目2a row id=evergreenRow。我有这个工作，但是，如果evergreenRow项目2a行被隐藏，我需要检查项目1a无线电id=放射性项目1。我之所以需要这样做，是为了消除人为错误，因为有人可以先选择项目2a行，然后将下拉菜单选择更改为10个以上，这将隐藏项目2a，但项目2a的收音机在隐藏时仍将被检查。我更新了我的JSFIDLE:。

$(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();
});