Custom CSS checkbox jQuery-induced "checked" property doesn't visually "check" the checkbox
<p>First off, sorry for the vague question, I had no idea how to put this into words. My problem is best illustrated by an example.</p>

<p>I am using a bootstrap dropdown menu with several checkboxes in it. I have used a css trick to change their appearance, using some nice FontAwesome icons. However, when I'm trying to do something with the state of these checkboxes using jQuery, the first check/uncheck seems to work, but any subsequent toggle (check/uncheck) doesn't work...</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.js-inputhit').click(function() {
  if (this === event.target) {
    $(this).find(':input').click();
  }
});
$('.js-inputhit :input').click(function(e) {
  e.stopPropagation();
});

$('.selectchat_all').click(function() {
  $('.selectchat_active').attr('checked', false);
  $('#chat1, #chat2, #chat3, #chat4').attr('checked', true);
});
$('.selectchat_active').click(function() {
  $('.selectchat_all').attr('checked', false);
  $('#chat1, #chat2, #chat3, #chat4').attr('checked', false);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*Adding custom checkbox icons*/

label {
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
label:before,
label:after {
  font-family: FontAwesome;
  font-size: 14px;
  /*absolutely positioned*/
  position: absolute;
  top: 0;
  left: 0;
}
label:before {
  content: '\f096';
  /*unchecked*/
}
label:after {
  content: '\f046';
  /*checked*/
  /*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
  max-width: 0;
  overflow: hidden;
  opacity: 0.5;
  /*CSS3 transitions for animated effect*/
  transition: all 0.35s;
}
/*hiding the original checkboxes*/

input[type="checkbox"] {
  display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/

input[type="checkbox"]:checked + label:after {
  max-width: 25px;
  /*an arbitratry number more than the icon's width*/
  opacity: 1;
  /*for fade in effect*/
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
&lt;input type="checkbox" name="chat1" id="chat1" checked/&gt;
&lt;label for="chat1" style="font-weight: normal; margin-bottom: 0px;"&gt;DreamhackCS&lt;/label&gt;
&lt;br&gt;

&lt;input type="checkbox" name="chat2" id="chat2" /&gt;
&lt;label for="chat2" style="font-weight: normal; margin-bottom: 0px;"&gt;IzakOOO&lt;/label&gt;
&lt;br&gt;

&lt;input type="checkbox" name="chat3" id="chat3" /&gt;
&lt;label for="chat3" style="font-weight: normal; margin-bottom: 0px;"&gt;Nightblue3&lt;/label&gt;
&lt;br&gt;

&lt;input type="checkbox" name="chat4" id="chat4" /&gt;
&lt;label for="chat4" style="font-weight: normal; margin-bottom: 0px;"&gt;imaqtpie&lt;/label&gt;
&lt;br&gt;&lt;br&gt;

&lt;input type="checkbox" name="active" class="selectchat_active" id="active" /&gt;
&lt;label for="active" style="font-weight: normal; margin-bottom: 0px;"&gt;Check none&lt;/label&gt;
&lt;br&gt;

&lt;input type="checkbox" name="all" class="selectchat_all" id="all"/&gt;
&lt;label for="all" style="font-weight: normal; margin-bottom: 0px;"&gt;Check all&lt;/label&gt;</code></pre>
</div>
</div>
</p>

<p>Problem in this example:
Clicking "Check all" checks all 4 channels. Clicking "Check none" unchecks all of them. (so far so good). However, after that, the "Check all" no longer works. It doesn't check the 4 channels anymore. "Check none" still unchecks all of them (if you manually check them), but "Check all" no longer works...</p>

<p>Can anyone find my problem :)? Thank you so much for your assistance.</p>