title: Chrome extension checkboxes not removing styles
body: <p>I have a Chrome extension that injects style sheets using multiple checkboxes.
  When checked adds the style sheets, when unchecked removes the style sheets.
  There is a button that add all and removes all styles.</p>
  <p>What is working.</p>
  <ul>
  <li>Checking and unchecking the individual checkboxes adds and removes
  the styles</li>
  <li>Checking the All all button adds all styles to the page.</li>
  </ul>
  <p>What is not working</p>
  <ul>
  <li>Unchecking the Check all button (aria-pressed=false) does not remove
  the styles.</li>
  <li>If all styles are added using the Add all button, none of the
  individual checkboxes work.</li>
  </ul>
  <p>Can someone please explain why the functionality is not working.
  If I can get this to work, the next step is to use chrome.storage.local to save the state of the checkbox when the popup.html closes, but that is a whole new learning curve.</p>
  <p>I should use a radio button group with check all yes/no rather than the button.
  And I've probably used way to much code for this functionality.</p>
  <p>Any code guidance is appreciated.</p>
  <p>POPUP.HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/popup.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;ws-bm-aria-matrices-button&quot; id=&quot;ws-bm-aria-matrices-parent&quot;&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Options&lt;/legend&gt;
          &lt;button type=&quot;button&quot; id=&quot;chkAllOptions&quot; class=&quot;pressed&quot; aria-pressed=&quot;false&quot;&gt;All options&lt;/button&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;label for=&quot;option01&quot; class=&quot;switch--label&quot;&gt;
                          &lt;span class=&quot;label&quot;&gt;Option 1&lt;/span&gt;
                      &lt;/label&gt;
                      &lt;input id=&quot;option01&quot; type=&quot;checkbox&quot; name=&quot;chkAll&quot;&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;label for=&quot;option02&quot; class=&quot;switch--label&quot;&gt;
                          &lt;span class=&quot;label&quot;&gt;Option 2&lt;/span&gt;
                      &lt;/label&gt;
                      &lt;input id=&quot;option02&quot; type=&quot;checkbox&quot; name=&quot;chkAll&quot;&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;label for=&quot;option03&quot; class=&quot;switch--label&quot;&gt;
                          &lt;span class=&quot;label&quot;&gt;Option 3&lt;/span&gt;
                      &lt;/label&gt;
                      &lt;input id=&quot;option03&quot; type=&quot;checkbox&quot; name=&quot;chkAll&quot;&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>POPUP.JS</p>
  <pre><code>let a = document.getElementById(&quot;chkAllOptions&quot;);
  let b = document.getElementsByName('chkAll');
  let c = document.getElementById(&quot;option01&quot;);
  let d = document.getElementById(&quot;option02&quot;);
  let e = document.getElementById(&quot;option03&quot;);
  
  //Check uncheck all
  a.addEventListener(&quot;click&quot;, async () =&gt; {
      let [tab] = await chrome.tabs.query({
          active: true,
          currentWindow: true
      });
      
    a.classList.toggle(&quot;pressed&quot;);
    a.setAttribute(
        'aria-pressed', 
        a.getAttribute('aria-pressed') === 'false' 
          ? 'true' 
          : 'false'
      );
     if (a.getAttribute('aria-pressed') === 'true') {
       for (let i = 0; i &lt; b.length; i++) { 
         b[i].checked = true;
         b[i].setAttribute(&quot;aria-checked&quot;,&quot;true&quot;);
           
    try {
      chrome.scripting.insertCSS({
        target: {
          tabId: tab.id,
        },
        files: [&quot;css/option01.css&quot; , &quot;css/option02.css&quot; , &quot;css/option03.css&quot;],
      });
    } catch (err) {
      console.error(`failed to insert CSS: ${err}`);
    }
           
       }
     } else if (a.getAttribute('aria-pressed') === 'false') {
       for (let i = 0; i &lt; b.length; i++) {
         b[i].checked = false;
         b[i].setAttribute(&quot;aria-checked&quot;,&quot;false&quot;);
       }
         
      try {
      await chrome.scripting.removeCSS({
        target: {
          tabId: tab.id,
        },
        files: [&quot;css/option01.css&quot; , &quot;css/option02.css&quot; , &quot;css/option03.css&quot;],
      });
    } catch (err) {
      console.error(`failed to remove CSS: ${err}`);
    }   
         
         
     }
   
   });
   
   //Individual checkboxes
   
   c.addEventListener(&quot;click&quot;, async () =&gt; {
      let [tab] = await chrome.tabs.query({
          active: true,
          currentWindow: true
      });
      
      c.setAttribute('aria-checked', c.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
  
      if (c.getAttribute('aria-checked') === 'true') {
  
          try {
              await chrome.scripting.insertCSS({
                  target: {
                      tabId: tab.id,
                  },
                  files: [&quot;css/option01.css&quot;],
              });
          } catch (err) {
              console.error(`failed to insert option 1 CSS: ${err}`);
          }
  
      } else if (c.getAttribute('aria-checked') === 'false') {
  
          try {
              await chrome.scripting.removeCSS({
                  target: {
                      tabId: tab.id,
                  },
                  files: [&quot;css/option01.css&quot;],
              });
          } catch (err) {
              console.error(`failed to remove option 1 CSS: ${err}`);
          }
  
      }
  
  });
  
  d.addEventListener(&quot;click&quot;, async () =&gt; {
      let [tab] = await chrome.tabs.query({
          active: true,
          currentWindow: true
      });
      
      d.setAttribute('aria-checked', d.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
      
      if (d.getAttribute('aria-checked') === 'true') {
  
          try {
              await chrome.scripting.insertCSS({
                  target: {
                      tabId: tab.id,
                  },
                  files: [&quot;css/option 2.css&quot;],
              });
          } catch (err) {
              console.error(`failed to insert landmark CSS: ${err}`);
          }
  
      } else if (d.getAttribute('aria-checked') === 'false') {
  
          try {
              await chrome.scripting.removeCSS({
                  target: {
                      tabId: tab.id,
                  },
                  files: [&quot;css/option 2.css&quot;],
              });
          } catch (err) {
              console.error(`failed to remove Option 2 CSS: ${err}`);
          }
  
      }
  
  });
  
  e.addEventListener(&quot;click&quot;, async () =&gt; {
      let [tab] = await chrome.tabs.query({
          active: true,
          currentWindow: true
      });
      
      e.setAttribute('aria-checked', e.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
      
      if (e.getAttribute('aria-checked') === 'true') {
  
          try {
              await chrome.scripting.insertCSS({
                  target: {
                      tabId: tab.id,
                  },
                  files: [&quot;css/Option03.css&quot;],
              });
          } catch (err) {
              console.error(`failed to insert option 3 CSS: ${err}`);
          }
  
      } else if (e.getAttribute('aria-checked') === 'false') {
  
          try {
              await chrome.scripting.removeCSS({
                  target: {
                      tabId: tab.id,
                  },
                  files: [&quot;css/option03.css&quot;],
              });
          } catch (err) {
              console.error(`failed to remove Option 3 CSS: ${err}`);
          }
  
      }
  
  });
  </code></pre>