<form id="join_form">
<fieldset>
  <legend>회원가입 폼</legend>
  <div>
    <dl class="l_form">
      <dt class="l_form_title">
        <span>덕질</span>
      </dt>
      
      <dd class="l_form_cont" id="chk_all_wrap">
        <span class="chk_box">
          <input type="checkbox" id="chk_deok_all" class="chk_deok" value="all" aria-controls="chk_deok_nell chk_deok_sungkyu chk_deok_day6">
          <label for="chk_deok_all" class="lab_deok"></label>
          <span class="chk_cont">All</span>
        </span>
        <span class="chk_box">
          <input type="checkbox" id="chk_nell" class="chk_deok chk_all" value="c">
          <label for="chk_nell" class="lab_deok"></label>
          <span class="chk_cont">nell</span>
        </span>
        <span class="chk_box">
          <input type="checkbox" id="chk_sungkyu" class="chk_deok chk_all" value="sungkyu">
          <label for="chk_sungkyu" class="lab_deok"></label>
          <span class="chk_cont">infinite</span>
        </span>
        <span class="chk_box">
          <input type="checkbox" id="chk_day6" class="chk_deok chk_all" value="day6">
          <label for="chk_day6" class="lab_deok"></label>
          <span class="chk_cont">day6</span>
        </span>
        <span class="chk_box">
          <input type="checkbox" id="chk_b1a4" class="chk_deok chk_all" value="c">
          <label for="chk_b1a4" class="lab_deok"></label>
          <span class="chk_cont">b1a4</span>
        </span>
        <span class="chk_box">
          <input type="checkbox" id="chk_girlsday" class="chk_deok chk_all" value="c">
          <label for="chk_girlsday" class="lab_deok"></label>
          <span class="chk_cont">girlsday</span>
        </span>
      </dd>
    </dl>
  </div>
  
  <div>
    <input type="submit" value="전송">
  </div>
</fieldset>
</form>
.l_form {
  position:relative;
  .required {
    position:absolute;
    left:-10px;
    color:#f00;
  }
}

.chk_deok {
  display:none;
  
  ~ .lab_deok {
    display:inline-block;
    width:16px;
    height:16px;
    background:url('http://cdns.careercruising.com/Content/style/image/input-sprite.png') no-repeat;
    background-position:-2px -2px;
    vertical-align:middle;
  }
  
  &:checked ~ .lab_deok {
    background-position:-2px -92px;
  }
}
View Compiled 
window.addEventListener('change', function(e){
  chkAll(e.target, 'chk_deok_all', 'chk_all') ;
})

function chkAll( $obj, chk_all, chks ) {
  const $chk_all = document.getElementById(chk_all);
  const $chks = document.getElementsByClassName(chks);
  let count = 0;
  
  for( let i=0; i<$chks.length; i++ ){
    if( $obj.id === chk_all )
      $chks[i].checked = $obj.checked;
    
    count = $chks[i].checked == true ? count+1 : count;
  } 
  
  if( count == $chks.length )
    $chk_all.checked = true;
  else
    $chk_all.checked = false;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.