0

所以我有一系列按钮，用于关闭/打开一周中每一天的所有复选框，目前看起来真的很乱，所以我想把所有按钮变成一个下拉选择字段，在更改例如，星期一的选项将运行星期一 jquery 以隐藏所有星期一复选框。

这是html

<input type='submit' name='submit_performances' value='update all'>
    <input type='button' id='select-all-toggle' name='select-all-toggle' value='Hide/Show all Performances'>
    <input type='button' id='select-all-toggle-monday' name='select-all-toggle-monday' value='Hide/Show all Monday Performances'>
    <input type='button' id='select-all-toggle-tuesday' name='select-all-toggle-tuesday' value='Hide/Show all Tuesday Performances'>
    <input type='button' id='select-all-toggle-wednesday' name='select-all-toggle-wednesday' value='Hide/Show all Wednesday Performances'>
    <input type='button' id='select-all-toggle-thursday' name='select-all-toggle-thursday' value='Hide/Show all Thursday Performances'>
    <input type='button' id='select-all-toggle-friday' name='select-all-toggle-friday' value='Hide/Show all Friday Performances'>
    <input type='button' id='select-all-toggle-saturday' name='select-all-toggle-saturday' value='Hide/Show all Saturday Performances'>
    <input type='button' id='select-all-toggle-sunday' name='select-all-toggle-sunday' value='Hide/Show all Sunday Performances'>
    </form>

这是jQuery

<script>
$(document).ready(function() {
    $('#select-all-toggle').toggle(
        function() {
            $('.select-all-identifier').prop('checked', true);
        },
        function() {
            $('.select-all-identifier').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-monday').toggle(
        function() {
            $('.monday').prop('checked', true);
        },
        function() {
            $('.monday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-tuesday').toggle(
        function() {
            $('.tuesday').prop('checked', true);
        },
        function() {
            $('.tuesday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-wednesday').toggle(
        function() {
            $('.wednesday').prop('checked', true);
        },
        function() {
            $('.wednesday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-thursday').toggle(
        function() {
            $('.thursday').prop('checked', true);
        },
        function() {
            $('.thursday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-friday').toggle(
        function() {
            $('.friday').prop('checked', true);
        },
        function() {
            $('.friday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-saturday').toggle(
        function() {
            $('.saturday').prop('checked', true);
        },
        function() {
            $('.saturday').prop('checked', false);
        }
    );
});

$(document).ready(function() {
    $('#select-all-toggle-sunday').toggle(
        function() {
            $('.sunday').prop('checked', true);
        },
        function() {
            $('.sunday').prop('checked', false);
        }
    );
});
</script>

任何帮助将不胜感激。

谢谢，

4

1 回答 1

1

检查文档ftw！jquery 文档有一个事件可以处理这个问题，这是页面：

http://api.jquery.com/change/

如果您向下滚动一点，您会看到有一个交互式示例显示它如何与选择框一起工作，如果我没记错的话，这正是您所追求的。

此外，还有一些基于您的示例代码的通用 javascript 提示：

  1. 正如上面评论中提到的那样，您只需要准备一个文档，您就可以将所有代码放入该单个函数中。

  2. 不要重复自己！您可以通过解析选择器字符串将所有这些单独的方法转换为一种方法。如果你在每个按钮上放置两个类而不是一个 ID，你可以有效地削减这里的大部分代码。第一节课是select-all-toggle星期几，第二节课是星期几。然后，您可以使用选择器在任何元素上运行切换和更改事件.select-all-toggle，并使用 jquery$(el).attr('class')拉出第二个类并取回当天的值。

我绝对可以在这里为您写一个更清晰的答案，但我认为这不利于学习。阅读这里的建议并尝试修改你的代码——我敢打赌你可以在我不给你答案的情况下完成这项工作:)

于 2013-03-20T17:13:46.407 回答