JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
	<h1>모임 계산기</h1>
	<div class="box">
		<h2>안주</h2>
		<ul class="list">
			<li><input type="checkbox" name="snack" id="snack_01" value="15000"><label for="snack_01">치킨</label></li>
			<li><input type="checkbox" name="snack" id="snack_02" value="17000"><label for="snack_02">김치찜</label></li>
			<li><input type="checkbox" name="snack" id="snack_03" value="14000"><label for="snack_03">오뎅탕</label></li>
			<li><input type="checkbox" name="snack" id="snack_04" value="16000"><label for="snack_04">통오징어 튀김</label></li>
		</ul>
	</div>

	<div class="box">
		<h2>주류</h2>
		<ul class="list">
			<li><input type="checkbox" name="drink" id="drink_01" value="4000"><label for="drink_01">소주</label></li>
			<li><input type="checkbox" name="drink" id="drink_02" value="4500"><label for="drink_02">병맥주</label></li>
			<li><input type="checkbox" name="drink" id="drink_03" value="3500"><label for="drink_03">500cc</label></li>
			<li><input type="checkbox" name="drink" id="drink_04" value="10000"><label for="drink_04">와인</label></li>
		</ul>
	</div>

	<div class="box">
		<h2>회비</h2>
		<p class="tip"><input type="text" name="tip" id="tip" value="0" />원</p>
	</div>

	<div class="box">
		<h2>인원</h2>
		<select id="people">
			<option value="1">혼술</option>
			<option value="2">2명</option>
			<option value="3">3명</option>
			<option value="4">4명</option>
			<option value="5">5명</option>
		</select>
	</div>

	<div class="box"><p>인당 : <em class="price" id="price">0</em>원</p></div>
</div>

CSS

*{margin:0;padding:0;list-style:none;}
html,body{height:100%;font-size:14px/1.5 'verdana', sans-serif;}
.wrap{width:700px;margin:100px auto;border:1px solid #999;}
h1{margin:10px;}
h2{margin:10px 0;}
div.box{margin:10px;}
ul.list:after{content:'';display:block;clear:both;}
ul.list li{float:left;margin-right:20px;}
p.tip input{width:200px;height:23px;line-height:23px;border:1px solid #999;text-align:right;}
select{border:1px solid #999;width:200px;height:23px;}
em.price{font-size:15px;color:#ff9900;font-style:normal;}

JavaScript

$(document).ready(function(){
	var	_checkbox = $('.list input:checkbox'),
			_inputbox = $('input#tip'),
			_selectbox = $('#people'),
			_price = $('#price'),
			_itemParice = [0, 0];

	//체크박스
	_checkbox.on('click', function(){
		var sum = 0;
		_checkbox.each(function() {
			if(this.checked){
				sum += parseInt(this.value);
			}
		});
		item = sum;
		totalPrice(item, 0);
	});

	//회비
  _inputbox.on('keyup focusout', function(){
		
		inNum = $(this).val($(this).val().replace(/[^0-9]/g,""));
		_thisValue = parseInt(inNum.val().replace(/(^0+)/, ""));
		//NaN값 체크
		if(isNaN(_thisValue) == false){
			_inputbox.val(String(_thisValue).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'));
			totalPrice(_thisValue, 1);
		}else{
			_inputbox.val(0);
			_thisValue = 0;			
			totalPrice(_thisValue, 1);
		}
		
	});

	//인원
	_selectbox.on('change', function(){
		totalPrice();
	});

	//결과값
	function totalPrice(item, num){
		var	_sum = 0,
				_people = $("#people option:selected").val();

		//인원 시 분기
		if(item != undefined){
			_itemParice.splice(num, 1, item);
			for (var i=0; i < _itemParice.length; i++ ) {
				_sum += parseInt(_itemParice[i]);
			}
		}else{
			for (var i=0; i < _itemParice.length; i++ ) {
				_sum += parseInt(_itemParice[i]);
			}
		}
		resultPrice = _sum/_people;
		_price.html(String(resultPrice).replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'));

	}
});