javascript переключает все и отключает кнопку одновременно

Question

У меня есть HTML-форма с флажками «удалить» массив и один флажок «togglechbx», чтобы переключить все флажки, чтобы проверить/снять отметку. Поэтому, когда ни один из delete [] не установлен, «delete-selected-btn» необходимо отключить, а флажок «togglechbx» должен быть снят автоматически.

Javascript ниже выполняет трюк, но я использую его из разных примеров stackoverflow. Вот почему это выглядит так уродливо и беспорядочно. Не могли бы вы, ребята, взглянуть, если есть способ сделать его короче и чище? Заранее спасибо.

<form id="show-images"> 
<input id="togglechbx" type="checkbox" onClick="toggle(this);" /> 
<input type="checkbox" class="delete-img" name="delete[]" value="1"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="2"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="3"/> 
<button id="delete-selected-btn" type="submit" disabled="disabled">Delete selected</button></form> 
<script> 
     $('.delete-img').change(function(){ 
     var arrlenght = $("#show-images input:checkbox:checked").length; 
     if (arrlenght > 0){ 
     if (arrlenght == 1 && document.getElementById("togglechbx").checked) { 
      $("#togglechbx").prop("checked", false); 
      $('#delete-selected-btn').attr("disabled", "disabled"); 
      return false; 
     } 
     // any one from delete is checked 
      $('#delete-selected-btn').removeAttr("disabled"); 
     }else{ 
     // none is checked 
       $('#delete-selected-btn').attr("disabled", "disabled"); 
     }}); 

    function toggle(source) { 
       checkboxes = document.getElementsByName('delete[]'); 
       for(var i=0, n=checkboxes.length; i<n; i++) { 
       checkboxes[i].checked = source.checked; 
       if ($("#show-images input:checkbox:checked").length > 0){ 
         $('#delete-selected-btn').removeAttr("disabled"); 
       }else{ 
       // none is checked 
         $('#delete-selected-btn').attr("disabled", "disabled"); 
       } 
       } 
    } 
</script> 

Answer 1

Вот что я придумал:

(function() { 
    var $delBtn = $("#delete-selected-btn"), 
     $delCBs = $("input.delete-img").click(function() { 
      var checkedCount = $delCBs.filter(":checked").length; 
      $delBtn.prop("disabled", checkedCount === 0); 
      if (checkedCount === 0) 
      $toggleCB.prop("checked", false); 
      else if (checkedCount == $delCBs.length) 
      $toggleCB.prop("checked", true); 
     }), 
     $toggleCB = $("#togglechbx").click(function() { 
      $delCBs.prop("checked", this.checked); 
      $delBtn.prop("disabled", !this.checked); 
     }); 
})(); 

Jawdroppingly удивительное демо: http://jsfiddle.net/Wfdy3/3/

Что я делаю выше, всякий раз, когда какой-либо от delete-img. Я узнал, сколько из них проверено, а затем отключите кнопку delete-selected-btn, если это число равно нулю. Затем if/else отключает флажок master toggle, если ни один из остальных не отмечен, или не проверяет мастер, если все остальные отмечены, - он не меняет статус основного флажка, если отмечены некоторые, но не все. Я не понимаю вашего описания, если вы хотите, чтобы автоматическая проверка мастер-флажка работала - если вы только захотите, чтобы он был проверен, были ли проверены все остальные, вы можете заменить структуру с четырьмя строками if/else на $toggleCB.prop("checked", checkedCount === $delCBs.length); как здесь: http://jsfiddle.net/Wfdy3/4/

Затем в обработчике кликов для переключателя главного переключателя я просто установил все остальные флажки в том же состоянии, что и главный, и включил или отключил кнопку delete-selected-btn, если это необходимо.

Обратите внимание, что анонимная функция - это просто сохранить переменные из глобальной области, и я использую обработчики кликов, а не обработчики изменений, потому что (я смутно помню это) в некоторых браузерах, когда флажок изменяется с клавиатуры событие изменения не происходит, пока флажок не теряет фокус, но событие click работает с мышью или клавиатурой.

Заметим также, что .prop() является подходящим методом JQuery использовать для установки в отключенном состоянии, не attr() и removeAttr() (я предполагаю, что вы используете достаточно новую версию JQuery, чтобы иметь возможность использовать .prop() при условии, что вы использовали его самостоятельно . в одном месте)

Answer 2

<form id="show-images"> 
<div class="toggle"> 
<input id="togglechbx" type="checkbox" onClick="toggle(this);" /> 
<input type="checkbox" class="delete-img" name="delete[]" value="1"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="2"/> 
<input type="checkbox" class="delete-img" name="delete[]" value="3"/> 
<button id="delete-selected-btn" type="submit" >Delete selected</button> 
</div> 
</form> 

Javascript

$("#show-images") .submit(function(){ 

$(".toggle") .toggle(); 

$('#delete-selected-btn').attr('disabled', ''); 

return false; 
}); 

Answer 3

Вы можете попробовать что-то вроде этого:

$(function() { 
    $("#show-images>.delete-img").change(function() { 
     if ($("#show-images>.delete-img:checked").length) { 
      $("#delete-selected-btn").removeAttr("disabled"); 
     } else { 
      $("#delete-selected-btn").attr("disabled", "disabled"); 
     } 

     $("#togglechbx").prop("checked", $("#show-images>.delete-img").length == $("#show-images>.delete-img:checked").length); 
    }); 

    $("#togglechbx").change(function() { 
     $("#show-images>.delete-img").each(function (i, e) { 
      $(e).prop("checked", $("#togglechbx").prop("checked")); 
     }); 
     $("#show-images>.delete-img").change(); 
    }); 
});