indeterminate.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. document.addEventListener('click', (event) => {
  2. const wrapper = event.target.closest('.checkboxes.indeterminate');
  3. if (wrapper) {
  4. event.preventDefault();
  5. const checkbox = wrapper.querySelector('input[type="checkbox"]:not([disabled])');
  6. const checkStatus = wrapper.dataset._checkStatus;
  7. wrapper.classList.remove('status-checked', 'status-unchecked', 'status-indeterminate');
  8. switch (checkStatus) {
  9. // checked, going indeterminate
  10. case '1':
  11. wrapper.dataset._checkStatus = '2';
  12. checkbox.indeterminate = true;
  13. checkbox.checked = false;
  14. checkbox.value = 0;
  15. wrapper.classList.add('status-indeterminate');
  16. break;
  17. // indeterminate, going unchecked
  18. case '2':
  19. wrapper.dataset._checkStatus = '0';
  20. checkbox.indeterminate = false;
  21. checkbox.checked = false;
  22. checkbox.value = '';
  23. wrapper.classList.add('status-unchecked');
  24. break;
  25. // unchecked, going checked
  26. case '0':
  27. default:
  28. wrapper.dataset._checkStatus = '1';
  29. checkbox.indeterminate = false;
  30. checkbox.checked = true;
  31. checkbox.value = 1;
  32. wrapper.classList.add('status-checked');
  33. break;
  34. }
  35. const input = new CustomEvent('input', { detail: { target: checkbox }});
  36. document.dispatchEvent(input);
  37. }
  38. });
  39. (document.querySelectorAll('input[type="checkbox"][indeterminate="true"]') || []).forEach((input) => { input.indeterminate = true; });