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?

Code:

  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>jQuery UI Button - Default functionality</title>
  7.     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  8.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  9.     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  10.     <script>

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


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

Monte---