JavaScript 全选按钮不起作用答案

【问题标题】：JavaScript Select All button does not functionJavaScript 全选按钮不起作用
【发布时间】：2016-11-08 21:44:48
【问题描述】：

我的音乐播放器（测试站点）上有一个小脚本，它应该允许用户取消选中（清除）所有复选框或全部选中（全选）。玩家位于HERE。这是我的内部 JavaScript：

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

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

我的意见：

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

清除按钮功能良好。 “全选”按钮不起作用。

我想知道问题是我的内部 Javascript 还是与玩家的自然默认打开并选中所有框这一事实有关？（“全选”按钮的目的只是如果用户决定收听所有歌曲，而不是少数选择的歌曲，则将检查返回到其自然位置。我意识到用户可以只刷新页面，但是我认为全选按钮会更加用户友好。

（播放器的 JavaScript，ttw-music-player.js，在页面源的头部标签中有它的位置链接。）处理复选框的部分是：

        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>'
        };

和

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

谁能帮我确定为什么全选（checkAll）功能不起作用，而清除（uncheckAll）功能起作用？

【问题讨论】：

当 checkAll() 函数被调用时，它无法在 DOM 中找到任何带有 check: true 的输入。所以，像这样运行它： function checkAll() { $("input[type='checkbox']").prop("checked", true) }

标签： javascript select checkbox

【解决方案1】：

取消选中复选框时，您将设置checked: false。因此，当调用 checkAll() 函数时，它无法在 DOM 中找到任何带有checked: true 的输入元素。

所以，像这样修改你的代码：

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

这肯定行得通。

【讨论】：

【解决方案2】：

我在下面从您的 checkAll() 函数中复制的行中的问题是，您正在调用已选中的复选框。

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

只需删除 :checked ，它就会处理它：

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

【讨论】：

非常感谢；这排序了！也感谢 Thinker 和 Shikher Aatrey 的贡献；这些解决方案也有效。

【解决方案3】：

尝试这样使用：

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"/>

希望它对你有用:)

【讨论】：