CODEWITHSUNDEEP
javascriptselectcheckbox
user3942375
user3942375

Reputation:

JavaScript Select All button does not function

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?

Upvotes: 0

Views: 162

Answers (3)

Shikher Aatrey
Shikher Aatrey

Reputation: 316

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.

Upvotes: 0

IsolatedThinker
IsolatedThinker

Reputation: 56

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)

Upvotes: 0

Arun AK
Arun AK

Reputation: 4370

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 :)

Upvotes: 1

Related Questions