JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<div class="row">
<label class="labelCell"><input type="checkbox" value="100000"> نام کالا</label><div class="priceCell">100000</div>
</div>
<div class="clear"></div>
<div class="row">
<label class="labelCell"><input type="checkbox" value="2520000"> نام کالا</label><div class="priceCell">2520000</div>
</div><div class="clear"></div>
<div class="row">
<label class="labelCell"><input type="checkbox" value="8000000"> نام کالا</label><div class="priceCell">8000000</div>
</div><div class="clear"></div>
<div class="row">
<label class="labelCell"><input type="checkbox" value="3460000"> نام کالا</label><div class="priceCell">3460000</div>
</div><div class="clear"></div>
<div class="row last">
<div class="labelCell">جمع کل</div><div class="priceCell"><span id="sumPrice"></span><span id="totalPrice">0</span></div>
</div><div class="clear"></div>

CSS

.row{
	display:block;
	width:100%;
}

.labelCell {
	display:tableCell;
	float:right;
	width:20%;
	padding:0;
	margin:0px;
}
.labelCell label {
	display:block;
	padding:5px;
}
.priceCell {
	display:tableCell;
	float:right;
	width:38%;
	padding:5px 1%;
	margin:0;
	direction:ltr
}
.clear {
	clear:both;
	display:block;
	overflow:hidden;
	line-height:1px;
	font-size:1px;
	height:1px;
}
.row.last {
	border-top:2px #aaa solid;
}
#sumPrice {
	display:none;
}

JavaScript

$(document).ready(function() {
	$('input').click(function() {
	var price = $(this).val();
	var totalP = $("#totalPrice").text();
	var plus = parseInt(totalP)+parseInt(price);
	var minus = parseInt(totalP)-parseInt(price);
		if($(this).prop("checked")) {
		$("#totalPrice").text(plus);
	}
	else {
	$("#totalPrice").text(minus);
	}	
	})
	
})