Web Design Leaves

<div id="calculator" class="calc">
  <div class="form-row">
    <label for="currency">対象通貨</label>
    <div class="input-group">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="currency" id="yen" value="yen" checked>
        <label class="form-check-label" for="yen">円</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="currency" id="dollar" value="dollar">
        <label class="form-check-label" for="dollar">ドル</label>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="with_tax">税込み価格</label>
      <div class="input-group">
        <div class="input-group-prepend"> <span class="input-group-text currency_symbol">￥ (JP)</span> </div>
        <input type="text" class="form-control" id="with_tax" name="with_tax" placeholder="税込み価格（半角数字）">
        <div class="input-group-append"> <span class="input-group-text currency">円</span> </div>
      </div>
    </div>
    <div class="form-group col-md-4">
      <label for="tax_rate">税率</label>
      <div class="input-group">
        <input type="text" class="form-control" id="tax_rate" name="tax_rate" placeholder="税率（半角数字）">
        <div class="input-group-append"> <span class="input-group-text">%</span> </div>
      </div>
    </div>
    <div class="form-group col-md-2">
      <label for="calculate">計算</label>
      <div class="input-group">
        <button id="calculate" name="calculate" class="btn btn-primary form-control">実行</button>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="without_tax">税抜き価格</label>
      <div class="input-group">
        <div class="input-group-prepend"> <span class="input-group-text currency_symbol">￥ (JP)</span> </div>
        <input type="text" class="form-control" id="without_tax" name="without_tax" placeholder="税抜き価格（結果）" readonly>
        <div class="input-group-append"> <span class="input-group-text currency">円</span> </div>
      </div>
    </div>
    <div class="form-group col-md-4">
      <label for="tax">税額</label>
      <div class="input-group">
        <div class="input-group-prepend"> <span class="input-group-text currency_symbol">￥ (JP)</span> </div>
        <input type="text" class="form-control" id="tax" name="tax" placeholder="税額（結果）" readonly>
        <div class="input-group-append"> <span class="input-group-text currency">円</span> </div>
      </div>
    </div>
  </div>
</div>
<p id="alert"></p> 

<script>
jQuery(function($){
  //各種変数の初期化
  var with_tax = '';
  var tax_rate = '';
  var without_tax = '';
  var tax = '';
  var alert_text ='';
  //対象通貨の初期値設定（デフォルト yen）
  var currency =  $("[name='currency']:checked").val() ? $("[name='currency']:checked").val() : 'yen';
  //税率の初期値設定（デフォルト 8%）
  if($("[name='tax_rate']").val() =='') {
    $("[name='tax_rate']").val(8);
  }

  //対象通貨が変更された際の処理用の関数（税込み価格計算でも使用）
  function change_currency (obj) {
  //obj は name='currency' のラジオボタンの jQuery オブジェクト
    currency_val =  obj.val();
    if(currency_val === 'dollar') {
      obj.closest('.calc').find("span.currency").text('ドル');
      obj.closest('.calc').find("span.currency_symbol").text('$ (US)');
    }else{
      obj.closest('.calc').find("span.currency").text('円');
      obj.closest('.calc').find("span.currency_symbol").text('￥ (JP)');
    }
  }

  //対象通貨の現在の値を反映
  change_currency ($("[name='currency']:checked"));

  //対象通貨が変更された際の処理
  $("[name='currency']").change(function() {
    change_currency ($(this));
  });

  //実行をクリックした際の処理
  $("#calculate").click(function() {
    //メッセージテキストの初期化
    alert_text ="";
    //もし値があればクリア
    $("#alert").text("");
    with_tax = $("[name='with_tax']").val();
    tax_rate = $("[name='tax_rate']").val();
    currency =  $("[name='currency']:checked").val();

    //税込価格と税率の入力値が数値でない場合はメッセージを表示して終了
    if(!$.isNumeric(with_tax) || !$.isNumeric(tax_rate)) {
      if(!$.isNumeric(with_tax)) {
      alert_text = '*「税込み価格」を半角数字で入力してください。'
         $("#alert").text(alert_text);
      }
      if ( !$.isNumeric(tax_rate)) {
        alert_text += '*「税率」を半角数字で入力してください。';
        $("#alert").text(alert_text);
      }
      return;
    }else {
      //税込価格と税率の入力値が数値の場合
      //税抜き価格の計算（日本円の場合）
      if(currency === 'yen') {
        //税込み価格
        with_tax = parseInt(with_tax);
        //税率
        tax_rate = parseFloat(tax_rate);
        //税抜き価格＝税込み価格 ÷ (1 + 税率) を切り上げ
        without_tax = Math.ceil(with_tax/(1 + tax_rate/100));
        $("[name='without_tax']").val(without_tax);
        //税額
        tax = with_tax - without_tax;
        $("[name='tax']").val(tax);
      }else{
        //税抜き価格の計算（US ドルの場合）
        with_tax = parseFloat(with_tax);
        tax_rate = parseFloat(tax_rate);
        //税抜き価格＝税込み価格 ÷ (1 + 税率) を100倍にして切り上げ（小数点以下対応）
        without_tax = Math.ceil(100 * (with_tax/(1 + tax_rate/100)));
        without_tax = without_tax/100;
        //浮動小数点数型の誤差を toFixed(2) で対処（固定小数点表記を用いてフォーマット）
        $("[name='without_tax']").val(without_tax.toFixed(2));
        tax = (with_tax - without_tax).toFixed(2);
        $("[name='tax']").val(tax);
      }
    }
  });
});
</script>