Checkbox - accessing via class selector seems to work once and not again.

Checkbox - accessing via class selector seems to work once and not again.

Hello Group!

I originally thought this was a problem with jQueryUI but decided to try with out the UI and found its more basic.

If I create groups of checkboxes and modify them via the class selector, I get some strange results. I have two groups of checkboxes all with unique id's and each group with its own class. I would like each group to reflect its checked value. The demo code below shows what I've done. When you click one "Test check A" (group A), then all of the A group checks will check. Likewise with uncheck. However do it again, it does not work. This is the same with group B. 

One note: The unchecking of the group seems to work consistently. Tried this on chrome/IE

Any ideas? Did I do something wrong?


  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>jQuery UI Button - Default functionality</title>
  6.     <link rel="stylesheet" href="//">
  7.     <script src="//"></script>
  8.     <script src="//"></script>
  9.     <script>

  10.         function buttonTest(elm) {
  11.             var parts ="-");
  12.             // Get class
  13.             var cls = ".test-check" + parts[2];
  14.             $(cls).attr("checked", elm.checked);
  15.         }
  16.     </script>
  17. </head>
  18. <body>

  19.     <input type="checkbox" class="test-check1" id="test-check-1-a" onclick="buttonTest(this)" /><label for="test-check-1-a">Test check A</label>
  20.     <input type="checkbox" class="test-check2" id="test-check-2-a" onclick="buttonTest(this)" /><label for="test-check-2-a">Test check B</label>
  21.     <br />
  22.     <input type="checkbox" class="test-check1" id="test-check-1-b" onclick="buttonTest(this)" /><label for="test-check-1-b">Test check A</label>
  23.     <input type="checkbox" class="test-check2" id="test-check-2-b" onclick="buttonTest(this)" /><label for="test-check-2-b">Test check B</label>
  24. </body>
  25. </html>
Thanks in advance !