JavaScript 全选按钮不起作用

JavaScript Select All button does not function

本文关键字：不起作用 按钮 全选 JavaScript      更新时间：2023-09-26

我的音乐播放器（测试站点）上有一个小脚本，应该允许用户取消选中（清除）所有复选框或全部选中（全选）。 播放器位于 这里. 这是我的内部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);
        }

谁能帮我确定为什么全选（全选）功能不起作用，而清除（取消全部）函数不起作用？

尝试像这样使用：

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

希望它对你有用:)

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

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

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

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

取消选中复选框时，您正在设置checked: false 。因此，当调用 checkAll（） 函数时，它无法使用 checked: true 在 DOM 中找到任何输入元素。

因此，请像这样修改代码： 

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

这肯定会奏效。

相关文章：