jQueryとJavaScriptそれぞれで税込価格自動計算機能の実装したソースコードを紹介！

2024年1月14日
デモ
HTML/CSS, JavaScript

デモ

今回は過去にあった案件の中から、入力フォームに税込価格自動計算の機能を実装したので今回はソースコードを紹介しようと思います！

1 実際の表示
2 ソースコード例

実際の表示

フォームに数字を入力すると自動で税込の金額が表示されます。
デフォルトで軽減税率対象商品のチェックが入っているので、数字を入力すると8%で税込金額が表示されます。
チェックを外すと税率が10%に変更されます。
初期表示は「ー円」となっています。負の数や数字以外を入力しても「ー円」のまま表示は変わりません。

販売価格(税別)必須

円(税抜)

軽減税率対象商品

ソースコード例

HTMLソースコード

<div class="form-group">
	<label for="taxExclude" class="form-group__heading">
		販売価格(税別)<span class="required-badge">必須</span>
	</label>
	<div class="form-content">
		<input type="number" id="taxExclude" name="taxExclude" min="0" required>
		<span>円(税抜)</span>
		<span id="taxInclude"></span>
	</div>
</div> 
<div class="form-group">
	<input id="taxCheck" type="checkbox" checked>
	<label for="taxCheck">軽減税率対象商品</label>
</div>

CSSソースコード

.form-group:nth-of-type(n+2) {
    margin-top: 20px;
}
.form-group__heading {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 700;
}
.form-group__heading::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 30px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: #094;
}
.required-badge {
    padding: 4px 8px;
    margin-left: 20px;
    font-size: 12px;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #dc3545;
    text-align: center;
    border-radius: 3px;
}
.form-content {
    margin-top: 20px;
}
input[type="number"] {
    width: 150px;
    padding: 12px;
    font-size: 14px;
    line-height: 100%;
    border-radius: 8px;
    border: 1px solid #ddd;
}
#taxInclude {
    font-weight: 700;
    margin-left: 20px;
}
@media screen and (max-width: 480px) {
    #taxInclude {
        display: block;
        margin-left: 0;
        margin-top: 20px;
    }
}

JavaScriptソースコード

純粋なJavaScriptの場合

const taxExcluded = document.querySelector('#taxExclude');
const taxIncluded = document.querySelector('#taxInclude');
const taxCheck = document.querySelector('#taxCheck');

function updateTaxIncludedPrice() {
    const taxRate = taxCheck.checked ? 1.08 : 1.10;
    const excludedPrice = parseFloat(taxExcluded.value);

    if (isNaN(excludedPrice) || excludedPrice <= 0) {
        taxIncluded.textContent = '販売価格：ー 円';
    } else {
        const priceVal = Math.round(excludedPrice * taxRate);
        taxIncluded.textContent = `販売価格：${priceVal}円（税込）`;
    }
}

taxExcluded.addEventListener('input', updateTaxIncludedPrice);
taxCheck.addEventListener('change', updateTaxIncludedPrice);

updateTaxIncludedPrice();

jQueryを使用した場合

const taxExcluded = jQuery('#taxExclude');
const taxIncluded = jQuery('#taxInclude');
const taxCheck = jQuery('#taxCheck');

function updateTaxIncludedPrice() {
    const taxRate = taxCheck.prop('checked') ? 1.08 : 1.10;
    const excludedPrice = parseFloat(taxExcluded.val());

    if (isNaN(excludedPrice) || excludedPrice <= 0) {
        taxIncluded.text('販売価格：－ 円');
    } else {
        const priceVal = Math.round(excludedPrice * taxRate);
        taxIncluded.text(`販売価格：${priceVal}円（税込）`);
    }
}

taxExcluded.on('change input', updateTaxIncludedPrice);
taxCheck.on('change input', updateTaxIncludedPrice);

updateTaxIncludedPrice();