jQuery addClass example

Change class name on click in jQuery

by Park Mino

HTML

<div class="wrap">
  <h1>이번주는 당신입니다.</h1>
  <div class="choice">
    <ul class="inner">
      <li><label for="check1"><input type="checkbox" name="choiceNum" id="check1"> 1</label></li>
      <li><label for="check2"><input type="checkbox" name="choiceNum" id="check2"> 2</label></li>
      <li><label for="check3"><input type="checkbox" name="choiceNum" id="check3"> 3</label></li>
      <li><label for="check4"><input type="checkbox" name="choiceNum" id="check4"> 4</label></li>
      <li><label for="check5"><input type="checkbox" name="choiceNum" id="check5"> 5</label></li>
      <li><label for="check6"><input type="checkbox" name="choiceNum" id="check6"> 6</label></li>
      <li><label for="check7"><input type="checkbox" name="choiceNum" id="check7"> 7</label></li>
      <li><label for="check8"><input type="checkbox" name="choiceNum" id="check8"> 8</label></li>
      <li><label for="check9"><input type="checkbox" name="choiceNum" id="check9"> 9</label></li>
      <li><label for="check10"><input type="checkbox" name="choiceNum" id="check10"> 10</label></li>
      <li><label for="check11"><input type="checkbox" name="choiceNum" id="check11"> 11</label></li>
      <li><label for="check12"><input type="checkbox" name="choiceNum" id="check12"> 12</label></li>
      <li><label for="check13"><input type="checkbox" name="choiceNum" id="check13"> 13</label></li>
      <li><label for="check14"><input type="checkbox" name="choiceNum" id="check14"> 14</label></li>
      <li><label for="check15"><input type="checkbox" name="choiceNum" id="check15"> 15</label></li>
      <li><label for="check16"><input type="checkbox" name="choiceNum" id="check16"> 16</label></li>
      <li><label for="check17"><input type="checkbox" name="choiceNum" id="check17"> 17</label></li>
      <li><label for="check18"><input type="checkbox" name="choiceNum" id="check18"> 18</label></li>
      <li><label for="check19"><input type="checkbox" name="choiceNum" id="check19"> 19</label></li>
      <li><label...

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
  font-size: 14px/1.5 'verdana', sans-serif;
}

.numResult {}

.numResult>ul:after {
  content: '';
  display: block;
  clear: both;
}

.numResult>ul>li {
  float: left;
  width: 30px;
  text-align: center;
}

#inNum {
  text-align: right;
  ime-mode: disabled
}

div.choice {
  width: 500px;
  margin: 0 auto;
}

div.choice .inner:after {
  content: '';
  display: block;
  clear: both;
}

div.choice .inner li {
  float: left;
  width: 100px;
  margin: 10px 0 0 0;
}

p.btn {
  text-align: center;
}

JavaScript

var _choice = $('.choice').find('input[name=choiceNum]'),
  _resultNum = 6;
_choiceArray = [];
_choiceArryNum = 0;

//고정 번호 선택
_choice.on('change', function() {
  var _checkOn = $('input[type=checkbox]:checked'),
    _checkLength = $('input[type=checkbox]:checked').length,
    _cNum = $('#cNum');
  _choiceArray = [];

  _checkOn.each(function() {
    var _this = parseInt($(this).attr('id').replace(/[^0-9]/g, ''));
    _choiceArray.push(_this);
  });

  if (_checkLength > _resultNum) {
    $(this).prop('checked', false);
    alert(_resultNum + '개 까지 선택 가능합니다.');

    _choiceArray.pop(); //마지막 녀석 제거
  }
  _choiceArryNum = _checkLength;
  var _choice_text = _choiceArray.join(",");
  _cNum.empty().append(_choice_text);

  return _choiceArray;
});


//번호 돌리기
$('#lottoNum').on('click', function() {
  var _inNum = $('#inNum').val(),
    _result = $('#result'),
    _numList = _result.find('ul').length + 1,
    _count = _result.find('h3.tit').length + 1,
    _cNum = $('#cNum').html(),
    _resultNum = 6 - _choiceArryNum;



  _result.append('<h3 class="tit">' + _count + '회' + '</h3>');

  for (i = 0; i < _inNum; i++) {
    var _array = [],
      _strNum = 40 - _choiceArryNum,
      _start = Math.floor(Math.random() * _strNum),
      _newArray3 = [],
      _newArray3len = 0;

    //1~45 숫자 변수에 담기
    for (n = 1; n < 46; n++) {
      _array.push(n);
    }

    while (_newArray3len != 6) {
      //랜덤 정렬
      _array.sort(function() {
        return Math.random() - 0.5
      });
      //시작지점 부터 선택한 숫제 제외한 크기만큼 가져옴.
      _newArray = _array.slice(_start, (_start + _resultNum));
      //배열 합치기

      if (_choiceArray != undefined) {
        _newArray2 = _choiceArray.concat(_newArray);
        //배열 중복 체크
        _newArray3 = _newArray2.reduce(function(a, b) {
          if (a.indexOf(b) < 0) a.push(b);
          return a;
        }, []);
      } else {
        _newArray3 = _newArray;
      }

      _newArray3len = _newArray3.length;

      if (_newArray3len == 6) {
       ...