Can't check all the checkbox in JavaScript

Question

I work on a web application and when running, my code don't even work. But if do

$("input[name^='show-points-']").attr("checked", false);

on the console, the checkboxes uncheck well.

Weird because, always in the console:

$("input[name^='show-points-']").attr("checked", "checked");

don't works.

In this Jsfiddle, the code works for the "uncheck" feature, but not the "check-all" one.

score 7 · Answer 1 · answered Dec 03 '15 at 10:05

7

Use prop()

Updated Fiddle

$("#show-all-points").change(function () {
    $("input[name^='show-points-']")
        .prop("checked", this.checked);
});

$("#show-all-points").change(function() {
  $("input[name^='show-points-']")
    .prop("checked", this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<tbody>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-pb">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-pi1">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-pi2">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-gp">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-ok">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-op">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" checked="checked" name="show-points-er">
    </td>
  </tr>
  <tr>
    <td></td>
    <td>Tout sélectionner/désélectionner
      <input type="checkbox" checked="checked" id="show-all-points">
    </td>
  </tr>
</tbody>

answered Dec 03 '15 at 10:05

Tushar

85,780
21
159
179

oaw 4 lines of code, but I don't understand how it works near '.prop("checked", this.checked);' – ricko zoe Dec 03 '15 at 10:11
2

@rickozoe `this.checked` returns the checked status of the `#show-all-points` checkbox, thus returning `true/false` and the same is set for all the other checkboxex. – Tushar Dec 03 '15 at 10:12
Fantastic the jsfiddle works, but it still don't works on my application. I know my code is not broken because I got some instructions after that still working. – ricko zoe Dec 03 '15 at 10:15
@rickozoe Are you really using in your application same jQuery version as in jsFiddle (1.10.1)? Any error in console? Is your change event bound at least? – A. Wolff Dec 03 '15 at 10:16
@A.Wolff I use 1.10.2, and I ain't got error in the console. But it seems I don't bound on the change event. The code is placed on a '$(function() {}' between code that works. – ricko zoe Dec 03 '15 at 10:24
@rickozoe Are this checkbox created dynamically, after DOM is ready? If ya, delegate event – A. Wolff Dec 03 '15 at 10:27
@A.Wolff You right it created dynamically after the DOM is ready! I always forget to think about that. So I look the documentation and this '$("#show-all-points").delegate("input", "change", function () {}" don't works too. – ricko zoe Dec 03 '15 at 10:41
@rickozoe You are wrongly delegating it, check doc for `delegate()`. Anyway, use `on()` instead, e.g: `$(document).on('change','#show-all-points',function(){...});`, problem solved... – A. Wolff Dec 03 '15 at 10:45
@A.Wolff Just correct my code and with '$(document).on('change','#show-all-points',function(){...});' it still don't works. – ricko zoe Dec 03 '15 at 10:50
@rickozoe I'll stop here guessing without seeing any MCVE, i'm sorry... – A. Wolff Dec 03 '15 at 10:55
@A.Wolff I understand, thank you. I have to work a 4000 procedural code at my new job, just awful. – ricko zoe Dec 03 '15 at 10:59

Can't check all the checkbox in JavaScript

1 Answers1