Question

所以我有一系列按钮，用于关闭/打开一周中每一天的所有复选框，此刻看起来非常混乱，所以我想把所有按钮变成一个下拉选择字段例如，将选项更改为星期一会运行星期一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>

非常感谢任何帮助。

谢谢，

Answer 1

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

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

如果你向下滚动一点，你会发现有一个交互式的例子显示它如何与选择框一起工作，如果我没有弄错的话就是你所追求的。

此外，还有一些基于您的示例代码的常规JavaScript提示：

正如上面评论中提到的那样，您只需准备一份文档，并且可以将所有代码放在该单一函数中。
不要重复自己！您可以通过解析选择器字符串将所有这些单独的方法转换为一个方法。如果在每个按钮而不是一个ID上放置两个类，则可以在此处有效地剪切大部分代码。第一堂课是select-all-toggle，第二堂课是星期几。然后，您可以使用.select-all-toggle选择器运行切换并更改任何元素上的事件，并使用jquery的$(el).attr('class')拉出第二个类并获取当天的值。

我绝对可以为你写一个更清晰的答案，但我认为这不利于学习。阅读这里的建议，并尝试修改你的代码 - 我打赌你可以让我的工作没有我只是给你一个答案：）

在选择下拉更改隐藏/显示复选框取决于选项值

1 个答案: