JavaScript Select All button does not function

Question

I have a small script on my music player (test site) that is supposed to allow the user to both uncheck (Clear) all the checkboxes or check them all (Select All). The player is located HERE. This is my internal JavaScript:

<script>
function uncheckAll() {
    $("input[type='checkbox']:checked").prop("checked", false)
}

function checkAll() {
    $("input[type='checkbox']:checked").prop("checked", true)
}
</script>

My input:

<input type="button" onclick="uncheckAll()" value="Clear"/><input class="check" type="button" onclick="checkAll()" value="Select All"/>

The Clear button functions well. The Select All button does not function.

I wondered if the problem is my internal Javascript or could it have something to do with the fact that the player's natural default is to open with all the boxes checked? (The purpose for the Select All button is just to return the checks to their natural position if the user decides to hear all the songs, after all, instead of a few select ones. I realize that the user could just refresh the page, but I thought the Select All button would be more user friendly.

(The player's JavaScript, ttw-music-player.js, has its location link within the page source's head tags.) Sections that deal with the checkboxes are:

        markup = {
            listItem:'<li class="track">' +
                        '<span class="title"></span>' +
                        '<span class="duration"></span>' +
                        '<span class="rating"></span>' +
                        '<a href="#" class="buy not-active" target="_blank"></a>' +
                        '<input class="cb" type="checkbox" checked="true">' +
                    '</li>',
            ratingBar:'<span class="rating-level rating-bar"></span>'
        };

and

                    function playlistNext() {
            $cbs = $(".cb");
            var index = current;
            do {
                index = (index + 1 < myPlaylist.length) ? index + 1 : 0;
            } while (!$cbs.eq(index).prop("checked"));
            playlistAdvance(index);
        }

Can anyone help me determine why the Select All (checkAll) function does not work, while the Clear (uncheckAll) function does?

When checkAll() function is called, it is not able to find any input in the DOM with checked: true. So, run it like this: function checkAll() { $("input[type='checkbox']").prop("checked", true) } — Shikher Aatrey
– Shikher Aatrey, Commented Jul 6, 2016 at 18:17

Arun AK · Accepted Answer · 2016-07-06 18:11:29Z

1

Try to use like this :

function uncheckAll() {
   $("input:checkbox").prop("checked", false)
}

function checkAll() {
   $("input:checkbox").prop("checked", true)
}

function uncheckAll() {
    $("input:checkbox").prop("checked", false)
}

function checkAll() {
    $("input:checkbox").prop("checked", true)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="tracks">
  <li><input type="checkbox"></li>
  <li><input type="checkbox"></li>
  <li><input type="checkbox"></li>
  <li><input type="checkbox"></li>
  <li><input type="checkbox"></li>
  <li><input type="checkbox"></li>
</ol>

<input type="button" onclick="uncheckAll()" value="Clear"/><input class="check" type="button" onclick="checkAll()" value="Select All"/>

Hope it works for you :)

answered Jul 6, 2016 at 18:11

Arun AK

4,3902 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IsolatedThinker · Accepted Answer · 2016-07-06 18:15:25Z

0

The issue in your line I've copied below from your checkAll() function is that you are calling out checkboxes that are already checked.

$("input[type='checkbox']:checked").prop("checked", true)

Just remove the :checked and it will take care of it:

$("input[type='checkbox']").prop("checked", true)

answered Jul 6, 2016 at 18:15

IsolatedThinker

563 bronze badges

1 Comment

user3942375 Over a year ago

Thanks so much; this sorted it! Thank you, as well, to Thinker and Shikher Aatrey for contributing; those solutions work, as well.

Shikher Aatrey · Accepted Answer · 2016-07-06 18:20:51Z

0

When the checkboxes are unselected, you are setting the checked: false. So, when checkAll() function is called, it is not able to find any input element in the DOM with checked: true.

So, modify your code like this:

function checkAll() {
    $("input[type='checkbox']").prop("checked", true)
}

This will definitely work.

answered Jul 6, 2016 at 18:20

Shikher Aatrey

3163 silver badges13 bronze badges

Collectives™ on Stack Overflow

JavaScript Select All button does not function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related