Question

我对js和jQuery很新。

我有一个简单的引导程序表。在两行中，我有单选按钮，一个用于项目1a，另一个用于项目2a。我还有两行，价格为1，价格为2。我最初隐藏价格-2（class =“hidden”），因此唯一可见的行是price-1。

我想使用js或jQuery来显示/隐藏.price-1和.price-2，具体取决于选择的无线电。因此，如果选择了项目1a（id =“radioItem1”）的无线电，我希望.price-1（第1项行）可见，而.price-2（第2项）行隐藏。如果项目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/

Answer 1

以下是您的解决方案：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();
});

javascript / jquery - 如果选中单选按钮，则隐藏/显示表格行

1 个答案: