jquery:checkbox全選/取消全選.選取者便背景色

by cactus77kiki

HTML

<!--try:勾選時改變css-->
<ul id="itemul">
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check1' >1</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check2'>2</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check3'>3</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check4'>4</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check5'>5</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check6'>6</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check7'>7</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check8'>8</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check9'>9</li>
  <li class="ligrp"><input name="chkgroup" type='checkbox' id='check10'>10</li>
</ul>
<br/>
<input type="button" value="全選" id="clickAll"/>
<input type="button" value="全取消" id="cancelAll"/>

CSS

.select
{
  background-color: #c2d5f9;  
  /*border:1px solid;*/
  /*color:blue;    */
}

/*
ref: https://stackoverflow.com/questions/44416481/if-checkbox-is-checked-change-only-style-of-that-item/44416569
ref: https://blog.wu-boy.com/2008/12/jquery%E5%88%A4%E6%96%B7-checkbox-%E6%98%AF%E5%90%A6%E9%81%B8%E5%8F%96%EF%BC%8C%E5%AF%A6%E7%8F%BE%E5%85%A8%E9%81%B8%E8%B7%9F%E5%85%A8%E9%83%A8%E5%8F%96%E6%B6%88/
*/

JavaScript

/*
$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});
*/

$(document).ready(function(){      $("input[name='chkgroup']").on('click',function(){
       if($(this).is(':checked'))        {       $(this).parents('.ligrp').addClass('select');       
       }       else{$(this).parents('.ligrp').removeClass('select');}
});

});

$("#clickAll").click(function() {       $("input[name='chkgroup").each(function() {
         $(this).prop("checked", true);
         $(this).parents('.ligrp').addClass('select');
     });    
});

$("#cancelAll").click(function(){
	$("input[name='chkgroup").each(function(){
 		$(this).prop("checked", false);    
  $(this).parents('.ligrp').removeClass('select');
  });
});