domingo, agosto 02, 2026

Script javascript para marcar todos los checkbox

Este script lo uso en el caso que necesito marcar todos los checks en una página web. Lo aplico usando la extensión de Chrome User JavaScript and CSS.



```
// Añade un botón flotante que, al pulsarlo, marca todos los checkboxes de la página.
// Pensado para "User JavaScript and CSS": pégalo como script nuevo,
// dominio/patrón de URL: *://*/*  (o el que prefieras), inyección en "document-end".

(function () {
  const BTN_ID = '__check_all_boxes_btn__';
  if (document.getElementById(BTN_ID)) return; // evita duplicados si el script corre más de una vez

  const CHECK_SELECTOR = 'input[type="checkbox"]';

  function markAll() {
    const boxes = document.querySelectorAll(CHECK_SELECTOR);
    boxes.forEach((cb) => {
      if (cb.checked || cb.disabled) return;
      cb.checked = true;
      // Dispara eventos para que frameworks (React, Vue, listeners nativos) se enteren del cambio
      cb.dispatchEvent(new Event('input', { bubbles: true }));
      cb.dispatchEvent(new Event('change', { bubbles: true }));
    });
    flashFeedback(boxes.length);
  }

  function flashFeedback(count) {
    const original = btn.textContent;
    btn.textContent = `✓ ${count} marcados`;
    setTimeout(() => { btn.textContent = original; }, 1200);
  }

  const btn = document.createElement('button');
  btn.id = BTN_ID;
  btn.textContent = '☑ Marcar todo';
  Object.assign(btn.style, {
    position: 'fixed',
    bottom: '20px',
    right: '20px',
    zIndex: 2147483647,
    padding: '10px 16px',
    background: '#2563eb',
    color: '#fff',
    border: 'none',
    borderRadius: '8px',
    fontSize: '14px',
    fontFamily: 'system-ui, sans-serif',
    boxShadow: '0 2px 8px rgba(0,0,0,0.25)',
    cursor: 'pointer',
  });
  btn.addEventListener('click', markAll);

  document.body.appendChild(btn);
})();
```