JSFiddle - React, Tailwind, and code Playground
by Park Mino
HTML
<div class="wrap">
<div class="calculator">
<h1 class="tit_h1">계산기</h1>
<div class="box_zone type_a">
<p class="title_box"><span class="tit">A 상품</span><span class="surely">필수 선택 상품입니다.</span></p>
<div class="prd_zone">
<ul class="list_inner">
<li>
<div class="chk_icon_box">
<span class="chk_icon"><input type="checkbox" id="a_01" name="" class="check" /></span>
<span class="str"><label for="a_01" class="check">A-1</label></span>
<div class="quantity_btn">
<input type="text" id="quantity_a1" name="quantity_a1" class="number" value="1" title="수량" />
<span class="plus"><button type="button" class="btn_pm"><span class="icon">▲</span><span class="blind">추가</span></button></span>
<span class="minus" ><button type="button" class="btn_pm"><span class="icon">▼</span><span class="blind">감소</span></button></span>
</div>
</div>
</li>
<li>
<div class="chk_icon_box">
<span class="chk_icon"><input type="checkbox" id="a_02" name="" class="check" /></span>
<span class="str"><label for="a_02" class="check">A-2</label></span>
<div class="quantity_btn">
<input type="text" id="quantity_a2" name="quantity_a2" class="number" value="1" title="수량" />
<span class="plus"><button type="button" class="btn_pm"><span class="icon">▲</span><span class="blind">추가</span></button></span>
<span class="minus" ><button type="button" class="btn_pm"><span class="icon">▼</span><span class="blind">감소</span></button></span>
</div>
</div>
</li>
<li>
<div class="chk_icon_box">
<span class="chk_icon"><input type="checkbox" id="a_03" name="" class="check" /></span>
<span class="str"><label for="a_03" class="check">A-3</label></span>
<div class="quantity_btn">
<input type="text" id="quantity_a3" name="quantity_a3" class="number" value="1" title="수량"/>
<span...CSS
/* 공통 css common.css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; font-size:13px; font-style: normal; }
body {color:#333;}
h1, h2, h3, h4, h5, h6{color:#3f4247;}
strong {color:#3f4247;}
ol, ul { list-style: none; }
img { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: #333; text-decoration: none; }
caption { display: none; }
.none {display:none;}
.blind {position:absolute; top:-9999px; left:-9999px; width:0; height:0; font-size:0; text-indent:-9999px;}
label, button {cursor:pointer;}
.wrap {margin:10px auto 50px; width:500px; padding:30px 20px; border:1px solid #dbdbdb; -webkit-box-sizing:border-box;box-sizing:border-box;}
.calculator {}
.tit_h1 { font-size:25px; margin:0 0 10px; }
.box_zone {padding-top:15px;}
.box_zone:first-child {padding-top:20px;}
.title_box {}
.title_box .tit {font-size:18px; font-weight:bold;}
.title_box .surely {display:inline-block; position:relative; margin-left:10px; padding-left:10px; color:#0d3eff; }
.title_box .surely:after {display:block; position:absolute; top:3px; left:0; content:"*";}
.prd_zone {margin-top:15px;}
.list_inner {width:100%;}
.list_inner:after {display:block; clear:both; content:"";}
.list_inner li {float:left; width:48%; margin:0 0 10px 1%;}
.list_inner li .chk_icon_box {position:relative; padding:5px 0 5px 18px;}
.list_inner li .chk_icon {display:block; position:absolute; top:9px; left:0; width:14px; height:14px; border:1px solid #dbdbdb; background:#fff;...JavaScript
// common.js
$(document).ready(function(){
calculatorFun('.calculator');
function calculatorFun(w){
var $wrap = $(w);
$zone = $wrap.find('.box_zone'),
$prdZone = $zone.find('.prd_zone'),
$list = $prdZone.find('ul > li'),
$chkBtn = $list.find('.chk_icon .check'), // 상품 checkbox
$btn_pm = $list.find('.btn_pm'),
$payZone = $zone.find('.payment_zone'),
$payCard = $payZone.find('.card_zone'),
$discount = $zone.find('.discount_zone');
var prdData={
ab:"", // A, B 나타내기
checked:false, // 체크
zero:false,
paymentA:0, // A 금액
paymentB:0, // B 금액
selectPrd:[[],[] ], // 선택한 값
product:[
[ // A 상품
["아무말","8400"],["목걸이","6100"],["자동차","6500"],["팔찌","5300"],
["악세서리","6300"],["건물","38200"],["장판","72400"],["김태훈","9900"]
],
[ // B 상품
["BB!!","23000"],["반지","45200"],["은하수","1000"],["파파","14100"],
["아이파","33000"],["건물주","90000"],["하늘공원","685400"],["스크류바","100"]
]
]
},
result={s1:0,s2:0,normal:0,sum:0,dis:0,div:1,price:0,
cash:0,maxCash:50000
},
selectText = "";
/* 연습 용 */
CssChange = {
product_check: function (chk) { //B 클릭 시 A 상품 체크 확인
var _chk = $(chk),
$prodChk = _chk.closest('.box_zone'),
_chkLi = $('.type_a').find('.chk'),
_index = _chk.closest('li').index(),
chkNum = _chkLi.length;
if($prodChk.hasClass('type_a') == false ){ // B 타입
if(chkNum <= 0){
alert("A 상품 선택해주세요");
_chk.removeAttr("checked");
_chk.closest('li').removeClass('chk');
prdData.zero = true;
}
prdData.ab = 1; // 1 : B
}else{ //A 타입
if(chkNum <= 0) {
alert("A 상품 다시 선택해주세요");
_chk.removeAttr("checked");
$('.type_b').find('.chk').removeClass('chk');
prdData.zero = true ;
}else{
prdData.zero = false;
}
prdData.ab = 0; // 0 : A
}
},
chkClick : function (e){ // 상품 클릭 시 표시
var _this = $(e),
$chk =...