javascript/jquery - hide/show table row if radio buttons checked

Question

I am very new to js and jQuery.

I have a simple bootstrap table. In two rows, I have radio buttons, one for item 1a and another for item 2a. I have another two rows with classes of price-1 and price-2. I am hiding price-2 initially (class="hidden"), so the only visible row is price-1.

I would like to use js or jQuery to show/hide .price-1 and .price-2 depending on which radio is selected. So, if the radio for Item 1a (id="radioItem1) is selected, I want .price-1 (Item 1 row) to be visible and .price-2 (Item 2 row) hidden. If the radio for Item 2a (id="radioitem2) is selected, I want .price-2 (Item 2 row) to become visible and hide .price-1 (Item 1 row). Only one of them should be visible at a time

Eventually, I will be making the bootstrap table rows clickable, so if someone clicks on the row (not the radio) it will select the radio. Because of this, if possible, I want the js to look if the radios are actually "checked" (not clicked), as I want to remove any possible human error component where a user can accidentally click twice on a row which will essentially toggle a click event twice. I think the on.click function works great for checkboxes, but not necessarily for radios.

How can I accomplish this?

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>

Here is a link to my jsfiddle where I am playing with what I am trying to do. https://jsfiddle.net/dhs3gphz/6/

Answer 1

Here is your solution: 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();
});