チェックボックスと画像切替の連動

初心者です。
どなたかご教授ねがいます。

■チェックボックスの一括選択と一括選択解除。
■チェックボックスが2つ以上チェックされているとき、editBtnの画像切り替え。

それぞれ、一応動作はしているのですが、チェックボックスの一括選択と一括選択解除時に、
editBtnの画像の切り替えが行われません。

教えてください。



---------------------------------------------------------------------------------------
【HTML】

<form id="frm">
<ul>
<li>
<input type="checkbox" name="checkbox01" id="checkbox01" class="thumbCheckbox"/>
<label for="checkbox01" class="checkbox_txt">01</label>
</li>
<li>
<input type="checkbox" name="checkbox02" id="checkbox02" class="thumbCheckbox"/>
<label for="checkbox02" class="checkbox_txt">02</label>
</li>
<li>
<input type="checkbox" name="checkbox03" id="checkbox03" class="thumbCheckbox"/>
<label for="checkbox03" class="checkbox_txt">03</label>
</li>
<li>
<input type="checkbox" name="checkbox04" id="checkbox04" class="thumbCheckbox"/>
<label for="checkbox04" class="checkbox_txt">04</label>
</li>
</ul>

<div class=btn><img id="checkBtn" src="img/btn_select01.png" alt="一括選択" width="150" height="40"/><img id="clearBtn" src="img/btn_reset01.png" width="150" height="40" alt="一括解除"/></div>

<ul id="editBtn">
<li>
<p class="btnOn"><a href="001.html"><img src="img/btn_edit_p02.png" width="225" height="60" alt="001ボタンon" /></a></p>
<p class="btnOff"><img src="img/btn_edit_p02.png" width="225" height="60" alt="001ボタンoff" /></p>
</li>
<li>
<p class="btnOn"><a href="002.html"><img src="img/btn_edit_t02.png" width="225" height="60" alt="002ボタンon" /></a></p>
<p class="btnOff"><img src="img/btn_edit_t02.png" width="225" height="60" alt="002ボタンoff" /></p>
</li>
</ul>

</form>



-----------------------------------------
【Javascript】
//editBtn画像切替
$(function() {
$("#frm :checkbox").click(function() {
if($("#frm :checked").length >= 2) {
$('.btnOff').css('display', 'block'),
$('.btnOn').css('display' ,'none');
} else {
$('.btnOff').css('display' ,'none'),
$('.btnOn').css('display', 'block');
}
});
});

//一括選択、一括解除
function func_extend() {
var checked = false;
var frm = document.getElementById("frm");
for (var i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].type == "checkbox") {
if (frm.elements[i].checked) {
checked = true;
break;
}
}
}
return false;
}

jQuery("#checkBtn").click(function(e) {
changeCheck(true);
});

jQuery("#clearBtn").click(function(e) {
changeCheck(false);
});

function changeCheck(flg) {
for (var i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].type == "checkbox") {
frm.elements[i].checked = flg;
}
}
return false;
}

質問者からの補足コメント

• >■チェックボックスが2つ以上チェックされているとき、editBtnの画像切り替え。
  
  分かりにくくてすみません。
  
  省略してしまったのですが、サムネイル画像を選択するためのチェックボックスなのです。
  editBtnはその選択した画像の編集画面に遷移するボタンなのですが、
  サムネイル画像1枚づつじゃないと編集できない仕様にしたいので、2つ以上選択したときにグレーアウトしたボタン画像に切り替えます。

  No.1の回答に寄せられた補足コメントです。 補足日時：2016/08/29 12:46

No.1 回答者： yambejp 回答日時： 2016/08/29 12:27

>■チェックボックスが2つ以上チェックされているとき、editBtnの画像切り替え。

の仕様がイマイチわかりません
１つでも選ばれれば普通は表示非表示を切り替えるもんじゃないですか？

一括の方はこんな感じで十分
$(function() {
$('#checkBtn').click(function(){
$('.thumbCheckbox').prop('checked',true);
});
$('#clearBtn').click(function(){
$('.thumbCheckbox').prop('checked',false);
});
});