jquery:checkbox全選/取消全選

by cactus77kiki

HTML

<!--try: RWD(圖片隨螢幕大小改變size)-->
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<input type="button" value="全選" id="clickAll"/>
<input type="button" value="全取消" id="cancelAll"/>
<br/>
<div class="row margin-b-2 display-flex">
  <div class="col-sm-4 col-md-2 imggroup" >
    <div class="box" style="border: 0px solid rgb(227, 230, 234);">
      <!--<div style="max-width: 180px; height: 168px;">-->
      <div class="thumbnail">
        <img src="https://img.ezfly.com/ims/I000/039/556.jpg?r=372783117" alt="" title="" class="img-thumbnail img01" style="border: 0px;">
      </div>
    <div>
    <input name="imgchk" type="checkbox" class="chksel" value="I000039556" style="word-break: break-all; overflow-wrap: break-word;">
    980-435-捷星航空聖誕促銷價
   </div>
   <div>
     <button type="button" title="原圖" class="btn btn-info btn-xs imgbtngroup">原圖</button>
     <button type="button" title="編輯" class="btn btn-success btn-xs imgbtngroup">編輯</button>
     <button type="button" title="複製圖片連結" class="btn btn-sm btn-xs imgbtngroup">複製圖片連結</button>
     <input type="text" id="CopyfieldI000039556" readonly="readonly" class="hiddenurl">
    </div>
  </div>
</div>
<div class="col-sm-4 col-md-2 imggroup" ><div class="box" style="border: 0px solid rgb(227, 230, 234);">
<!--<div style="max-width: 180px; height: 168px;">-->
<div class="thumbnail" >
<img src="https://img.ezfly.com/ims/I000/039/555.jpg?r=21411226" alt="1920-500加拿大航空-豪華經濟艙" title="1920-500加拿大航空-豪華經濟艙" class="img-thumbnail img01" style="border: 0px;"></div> <div><input name="imgchk" type="checkbox" class="chksel" value="I000039555" style="word-break: break-all; overflow-wrap: break-word;">
                1920-500加拿大航空-豪華經濟艙                                
            </div> <div><button type="button" title="原圖" class="btn btn-info btn-xs imgbtngroup">原圖</button> <button type="button" title="編輯" class="btn btn-success btn-xs imgbtngroup">編輯</button>...

CSS

.hiddenurl{
  display:none;
}

.select{
  background-color: #cfdcfc;   
  border: 0.5px solid #3f5fa8;
}


.row{
    display: flex;
    flex-wrap: wrap;
  }
  .row>[class="col-sm-6 col-md-4"]{
    display: flex;
    flex-direction: column;
  }

/*
step:
1. css => add '.select'
2. html => 
   (1)<div class="col-sm-4 col-md-2">
      加入 => class 'imggroup'
      刪除 => style="max-width: 180px; height: 168px;"
   (2)<img>內的class=thumbnail => 拿至上一層的div中列class
   (3)<img>上層div中style="max-width: 200px;" =>拿除
3. javascript =>
   (1)clickAll & cancelAll event adjust
   (2)$("input[name='imgchk']").click add event   
*/
/*
current(0): https://stackoverflow.com/questions/23379318/have-thumbnails-with-different-images-sizes-bootstrap
*/

JavaScript

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

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

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

});