<a title="Filter Category" id="general" class=""><i>Count the checkboxes <small class="counter"></small></i></a> <div id="video-filter-container"> <div id="general-content" class="video-filter-content"> <ul id="general-ul" class="wpuf-category-checklist"> <li id="category"> <label class="selec"><input type="checkbox" class="select_all" /> .Select_all Foo</label> <ul class="children"> <li id="category-4"><label class="selectit"><input value="4" type="checkbox" name="wpmm[]" id="in-category-4" /> Foo1</label></li> <li id="category-112"><label class="selectit"><input value="112" type="checkbox" name="wpmm[]" id="in-category-112" /> Foo2</label></li> </ul> </li> <li id="category"> <label class="selec"><input type="checkbox" class="select_all" /> .Select_all Bar</label> <ul class="children"> <li id="category-3"> <label class="selectit"><input value="3" type="checkbox" name="wpmm[]" id="in-category-3" /> Bar1</label></li> <li id="category-115"><label class="selectit"><input value="115" type="checkbox" name="wpmm[]" id="in-category-115" /> Bar2</label></li> <li id="category-114"><label class="selectit"><input value="114" type="checkbox" name="wpmm[]" id="in-category-114" /> Bar3</label></li> </ul> </li> </ul> </div> </div>
$(function() { $('#general i .counter').text(' '); var generallen = $("#general-content input[name='wpmm[]']:checked").length; if(generallen>0){$("#general i .counter").text('('+generallen+')');}else{$("#general i .counter").text(' ');} }) function updateCounter() { var len = $("#general-content input[name='wpmm[]']:checked").length; if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');} } $("#general-content input:checkbox").on("change", function() { updateCounter(); }); $(function() { $('.select_all').change(function() { var checkthis = $(this); var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']"); if(checkthis.is(':checked')) { checkboxes.attr('checked', true); } else { checkboxes.attr('checked', false); } updateCounter(); }); })
alert( $('input[type=checkbox]').is(':checked').length )
<a title="Filter Category" id="general" class=""><i>Count the checkboxes <small class="counter"></small>; Foo <small class="counter-foo"></small>; Bar <small class="counter-bar"></small<></i></a> <div id="video-filter-container"> <div id="general-content" class="video-filter-content"> <ul id="general-ul" class="wpuf-category-checklist"> <li id="category" class="checkbox-foo"> <label class="selec"><input type="checkbox" class="select_all" /> .Select_all Foo</label> <ul class="children"> <li id="category-4"><label class="selectit"><input value="4" type="checkbox" name="wpmm[]" id="in-category-4" checked /> Foo1</label></li> <li id="category-112"><label class="selectit"><input value="112" type="checkbox" name="wpmm[]" id="in-category-112" /> Foo2</label></li> </ul> </li> <li id="category" class="checkbox-bar"> <label class="selec"><input type="checkbox" class="select_all" /> .Select_all Bar</label> <ul class="children"> <li id="category-3"> <label class="selectit"><input value="3" type="checkbox" name="wpmm[]" id="in-category-3" /> Bar1</label> </li> <li id="category-115"><label class="selectit"><input value="115" type="checkbox" name="wpmm[]" id="in-category-115" /> Bar2</label></li> <li id="category-114"><label class="selectit"><input value="114" type="checkbox" name="wpmm[]" id="in-category-114" /> Bar3</label></li> </ul> </li> </ul> </div> </div>
$(function () { $("#general i .counter").text(''); $('#general i .counter-foo, #general i .counter-bar').text(''); /*var generallen = $("#general-content input[name='wpmm[]']:checked").length; if (generallen > 0) { $("#general i .counter").text("(" + generallen + ")"); } else { $("#general i .counter").text(''); }*/ // ซ้ำซ้อน อย่าใช้ ใช้ updateCounter() โดยตรงเลย updateCounter(); }); function updateCounter() { // count ALL checkboxes. let allChecked = $('#general-content input[name="wpmm[]"]:checked').length; if (allChecked > 0) { $("#general i .counter").text('(' + allChecked + ')'); } else { $("#general i .counter").text(''); } // count foo updateCounterFor('foo'); // count bar updateCounterFor('bar'); } function updateCounterFor(part = 'foo') { let partChecked = $('#general-content .checkbox-' + part + ' input[name="wpmm[]"]:checked').length; if (partChecked > 0) { $('#general i .counter-' + part).text('(' + partChecked + ')'); } else { $('#general i .counter-' + part).text(''); } } $("#general-content input:checkbox").on("change", function () { updateCounter(); }); $(function () { $(".select_all").change(function () { let thisCheckbox = $(this); var checkboxes = thisCheckbox.parent().next("ul").find("input[name='wpmm[]']"); if (thisCheckbox.is(":checked")) { checkboxes.attr('checked', 'checked');// old jQuery. checkboxes.prop('checked', true);// modern jQuery } else { checkboxes.removeAttr('checked');// old jQuery checkboxes.prop('checked', false);// modern jQuery } updateCounter(); }); });
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง